如何使用React Hook构建可重用的表单组件

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 函数来更新表单值。