需要帮助翻译成箭头函数

Question

到目前为止我有这个，但需要在使用 react-hook-form 和 gatsby-plugin-intl 的现有表单上的箭头函数中使用它

表单应采用以下格式，我也使用 useState 进行提交。

代码正在检查所选选项的值以显示条件字段/我想我需要为此字段使用 watch API，但首先需要将 包含到完整的表单中。

   const ContactForm = ({ intl }) => {
   
   const [submitted, setSubmitted] = useState(false)
   
   [...]     }

相对

https://codesandbox.io/s/cocky-oskar-o2m6c
   
   class SelectOptions extends React.Component {
     constructor(props) {
       super(props)
       this.state = {
         fruit: 'Apple',
       }
       this.handleChange = this.handleChange.bind(this)
     }
     handleChange(e) {
       this.setState({ fruit: e.target.value })
     }
   
     render() {
       const isComplaint = this.state.fruit
       let complaint
       if (isComplaint === 'Strawberry') {
         complaint = <div>How Are You Doing?</div>
       } else {
         complaint = <div></div>
       }
       return (
         <div className='mt-10'>
           SELECT ONE
           <div className='mt-2'>
             <select value={this.state.fruit} onChange={this.handleChange}>
               <option value='apple'>Apple</option>
               <option value='Strawberry'>Strawberry</option>
               <option value='Cucumber'>Cucumber</option>
             </select>
           </div>
           {complaint}
         </div>
       )
     }
   }
   export default SelectOptions

Answer 1

我不认为这是学习的方式，您有完整详细的文档 - https://reactjs.org/docs/hooks-intro.html

但无论如何，如果它有帮助 - 它应该是 -

const SelectOptions = (props) => {
    [state, setState] = useState({})

    const handleChange = (e) => {
        setState({...state, fruit: e.target.value})
    }

    return (
         ...
         <select value={state.fruit} onChange={handleChange}>
         ...
    )
}

Answer 2

将类组件转换为函数组件的一般步骤。

1. 函数组件是无实例的，因此不是“构造的”。将this.state 转换为一个或多个useState React 钩子。
2. 将componentDidMount、componentDidUpdate 和componentWillUnmount 生命周期方法逻辑移动到一个或多个useEffect React 钩子与适当的依赖数组。
3. 函数组件的整个函数体被认为是“渲染”函数。函数的返回值就是 render 方法返回的值。

功能组件版本：

const options = [
  {
    label: "Apple",
    value: "apple"
  },
  {
    label: "Strawberry",
    value: "strawberry"
  },
  {
    label: "Cucumber",
    value: "cucumber"
  }
];

const SelectOptions = () => {
  const [state, setState] = React.useState({ fruit: "Apple" });

  const handleChange = (e) => {
    // Functional state update to shallow merge any previous state
    setState((state) => ({
      ...state,
      fruit: e.target.value
    }));
  };

  return (
    <div className="mt-10">
      SELECT ONE
      <div className="mt-2">
        <select value={state.fruit} onChange={handleChange}>
          {options.map(({ label, value }) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>
      </div>
      {/* Conditionally render the div */}
      {state.fruit === "strawberry" && <div>How Are You Doing?</div>}
    </div>
  );
};

• Functional State Update
• Conditional Rendering

Answer 3

在 react 功能组件中，您需要 useState 从 react 中创建状态。它与基于类组件的不同。你可以按照我的代码在这里。我已经对其进行了测试并且可以正常工作。希望对你有用。

import { useState } from "react";

const SelectOptions = () => {
  const [fruit, setFruit] = useState("apple");

  const handleChange = (e) => {
    setFruit(e.target.value);
    console.log(e.target.value);
  };

  const Complaint = (props) => {
    return (
      <div>{props.fruit === "Strawberry" ? "How Are You Doing?" : ""}</div>
    );
  };

  return (
    <div className="mt-10">
      SELECT ONE
      <div className="mt-2">
        <select value={fruit} onChange={handleChange}>
          <option value="apple">Apple</option>
          <option value="Strawberry">Strawberry</option>
          <option value="Cucumber">Cucumber</option>
        </select>
      </div>
      <Complaint fruit={fruit} />
    </div>
  );
};

export default SelectOptions;

在那里我将Complaint 作为组件分隔。如果你愿意，你可以把它放在不同的文件中，而不是像往常一样导入。