如何转换<any>handleChange从类到功能组件的函数

Question

我正在尝试将现有的react类转换为功能组件。我理解函数使用useState()函数而不是像在课堂上那样使用setState()。如何将这段处理任何输入更改的代码转换为功能代码?

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

Answer 1

您可以为每个字段使用不同的useState钩子，但您不必这样做。通过使用单个state对象来保存所有字段，您可以使您的设置与类组件中的设置几乎相同。主要区别在于，使用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>
);
};