React Hook 表单 - Javascript

React Hook 表单提供了一种方便快捷的方式，用于在 React 应用程序中管理表单输入。使用 React Hooks，我们可以轻松地将表单状态（例如输入值、错误消息等）与 React 组件的状态分离开来，并使其具有更大的可重用性和可测试性。

使用 useState Hook 管理表单状态

要使用 useState Hook 管理表单状态，我们需要使用类似下面的代码：

import React, {useState} from 'react';

function MyForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  
  const handleSubmit = e => {
    e.preventDefault();
    console.log("Name: ", name);
    console.log("Email: ", email);
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

在此代码中，我们使用 useState Hook 定义了 name 和 email 两个状态变量。我们通过 value 属性绑定表单输入框的值，并使用 onChange 属性更新状态变量。

在提交表单时，我们使用了 handleSubmit 函数处理表单数据。

使用 useReducer Hook 管理复杂表单状态

当处理更复杂的表单时，可能需要使用更高级的 Hook，例如 useReducer。以下是一个使用 useReducer Hook 管理复杂表单状态的示例：

import React, {useReducer} from 'react';

function formReducer(state, event) {
  return {
    ...state,
    [event.name]: event.value
  }
}

function MyForm() {
  const [formData, setFormData] = useReducer(formReducer, {});
  
  const handleChange = e => {
    setFormData({
      name: e.target.name,
      value: e.target.value
    });
  }
  
  const handleSubmit = e => {
    e.preventDefault();
    console.log("Form data: ", formData);
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name || ""}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email || ""}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

在此代码中，我们使用 useReducer Hook 定义了 formData 状态变量，并实现了 formReducer 函数，该函数根据传入的事件更新状态。

我们使用 name 和 value 属性将表单输入框的值绑定到状态变量，并使用 handleChange 函数更新状态。

在提交表单时，我们使用 handleSubmit 函数处理表单数据，此数据存储在 formData 变量中。

结论

React Hook 表单提供了一种简单而强大的方式，用于管理 React 应用程序中的表单输入。好处是，使用 React Hooks，我们可以轻松地管理表单状态，并使其具有更大的可重用性和可测试性。