需要帮助转换成箭头功能

Question

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

表单应该是下面的格式，我也是使用 useState 提交的。

代码正在检查为显示条件字段而选择的选项的值/我想我需要为该字段使用手表 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

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

函数组件是无实例的，因此不是“构造的”。将 this.state 转换为一个或多个 useState React hooks。
将 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法逻辑移动到一个或多个 useEffect 具有适当依赖项数组的 React 挂钩中。
一个函数组件的整个函数体被认为是“render”函数。函数的 return 就是 render 方法 returns.

函数组件版本：

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>
  );
};

Answer 3

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

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 作为组件分开。如果你愿意，你可以把它放在不同的文件中，而不是像往常一样导入它。

需要帮助转换成箭头功能

Need help translating into an arrow function

reactjs

react-functional-component