React Hook 是 React 16.8 引入的新特性，它可以让我们在不编写 class 的情况下使用 state 和其他 React 特性。在本文中，我们将使用 React Hook 来构建一个可重用的表单组件，以帮助我们更加高效地开发表单。
第一步：创建一个表单组件
首先，我们需要创建一个简单的表单组件。我们在这个组件中设置了一个 input 和一个 button，当用户点击按钮时，我们将 input 的值输出到控制台。这是我们的代码：
import React, { useState } from 'react';
const Form = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={value} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
};
export default Form;
第二步：将表单组件转换为可重用的组件
现在我们已经有了一个简单的表单组件，接下来我们将其转换为可重用的组件。为了实现这一点，我们将使用 React Hook 来创建一个自定义 Hook，它将处理表单值和提交事件。
import { useState } from 'react';
export const useForm = (callback) => {
const [values, setValues] = useState({});
const handleSubmit = (event) => {
if (event) event.preventDefault();
callback(values);
};
const handleChange = (event) => {
event.persist();
setValues((values) => ({
...values,
[event.target.name]: event.target.value,
}));
};
return {
handleChange,
handleSubmit,
values,
};
};
在这个自定义 Hook 中，我们使用了 useState 来管理表单值，并在 handleChange 函数中更新它们。我们还将 handleSubmit 函数作为参数传递给自定义 Hook，以便在表单提交时调用。
第三步：使用自定义 Hook 创建新的表单组件
现在我们已经创建了一个可重用的 Hook，我们可以使用它来创建新的表单组件。我们可以使用 useForm Hook 来处理表单值和提交事件，并将它们传递到我们的表单组件中。
import React from 'react';
import { useForm } from './useForm';
const Form = ({ onSubmit }) => {
const { values, handleChange, handleSubmit } = useForm(onSubmit);
return (
<form onSubmit={handleSubmit}>
<input type="text" name="name" value={values.name || ''} onChange={handleChange} />
<input type="email" name="email" value={values.email || ''} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
};
export default Form;
在这个新的表单组件中，我们传递了一个 onSubmit 属性，它是自定义 Hook 中的 handleSubmit 函数。我们还使用了 handleChange 函数来更新表单值，并将它们作为 values 属性传递给 input 元素。
现在，我们已经创建了一个可重用的表单组件，它可以轻松地在应用程序的各个地方使用。我们可以通过将 onSubmit 函数传递给表单组件来处理表单提交事件，并使用 handleChange 函数来更新表单值。
网友评论