如何将 <any> handleChange 函数从 class 转换为功能组件

Question

我正在尝试将现有的 React class 转换为功能组件。我知道函数使用 useState() 函数而不是像 class 中那样的 setState()。我如何将处理任何输入更改的这段代码转换为功能代码？

handleChange = (input) => (e) => {
    this.setState({ [input]: e.target.value });
  };

Answer 1

您可以为每个字段设置不同的 useState 挂钩，但您不必这样做。通过使用单个 state 对象来保存所有字段，您可以使设置与 class 组件中的设置几乎相同。主要区别在于使用 useState 您必须提供整个状态，因此您需要使用 ...state 来包含未更改的属性。

const Form = () => {
  const [state, setState] = React.useState({
    first: "",
    last: "",
    address: ""
  });

  const handleChange = (input: keyof typeof state) => 
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setState({
        ...state,
        [input]: e.target.value
      });
    };

  return (
    <form>
      <input value={state.first} onChange={handleChange("first")} />
      <input value={state.last} onChange={handleChange("last")} />
      <input value={state.address} onChange={handleChange("address")} />
    </form>
  );
};

如何将 <any> handleChange 函数从 class 转换为功能组件

How do I convert an <any> handleChange Function from class to functional component

javascript

event-handling

typescript

reactjs