在 React 应用中，处理表单状态是一个常见但有时复杂的任务。每个表单字段通常需要自己的状态和更新逻辑，这可能导致代码重复和难以维护。useForm 钩子提供了一种简洁的方法来管理整个表单的状态，大大简化了表单处理过程。这个自定义钩子不仅减少了样板代码，还提高了表单处理的一致性和可维护性。以下是如何实现和使用这个自定义钩子：
const useForm = initialValues => {
const [values, setValues] = React.useState(initialValues);
return [
values,
e => {
setValues({
...values,
[e.target.name]: e.target.value
});
}
];
};
const Form = () => {
const initialState = { email: '', password: '' };
const [values, setValues] = useForm(initialState);
const handleSubmit = e => {
e.preventDefault();
console.log(values);
};
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" onChange={setValues} />
<input type="password" name="password" onChange={setValues} />
<button type="submit">Submit</button>
</form>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<Form />
);
这个技巧的关键点包括：
使用 useState创建一个状态对象来存储所有表单字段的值。返回当前表单状态和一个更新函数，该函数可以处理任何表单字段的变化。 更新函数使用输入元素的 name属性来确定要更新的字段。
使用这个钩子时，需要注意以下几点：
初始状态应该包含所有表单字段的初始值。 每个表单字段都需要一个唯一的 name属性，与状态对象中的键对应。这个钩子适用于简单的表单，对于复杂的验证逻辑可能需要扩展。
扩展应用：
添加表单验证：
