需要帮助转换成箭头函数

Question

到目前为止，我还需要它在现有表单上的箭头函数中使用react 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

我不认为这是学习的方法，你有详细的docs - 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

在中，需要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作为组件分开。如果您愿意，可以在不同的文件中进行操作，而不是像通常那样导入它。

Answer 3

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

1. 函数组件是不存在的，因此不是“构造”的。将this.state转换为一个或多个useState反应钩子。
2. 将componentDidMount、componentDidUpdate和componentWillUnmount生命周期方法逻辑移动到一个或多个useEffect中，使用适当的依赖数组来响应钩子。
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>
  );
};

​

​

• 功能状态更新
• 条件渲染