数据驾驭：React中表单数据收集的诀窍

前端

2023-11-03 19:27:37

在React应用程序中，处理表单数据是一项常见任务。无论是注册表单、联系表单还是产品购买表单，表单都是用户与应用程序交互的关键元素。如何从表单中收集数据是每个React开发者都应该掌握的基本技能。

React提供了两种收集表单数据的方式：受控组件和非受控组件。两种组件各有优缺点，了解它们之间的差异有助于您做出最合适的组件选择。

非受控组件：简单而直接

非受控组件是一种更加直接的方式来收集表单数据。在非受控组件中，表单元素的值不受React状态的控制。相反，您使用ref来访问表单元素并获取其值。

受控组件：状态管理更佳

受控组件是一种更加受控的方式来收集表单数据。在受控组件中，表单元素的值由React状态控制。这意味着当用户输入表单时，React会更新状态，从而使表单元素的值与状态保持同步。

哪个组件更适合您？

受控组件和非受控组件都各有优缺点。受控组件提供了更好的状态管理，而非受控组件则提供了更高的灵活性。

在大多数情况下，受控组件是更好的选择。因为它们提供了更好的状态管理和更简单的数据验证。但是，在某些情况下，非受控组件可能更适合，例如当您需要处理大量表单元素时。

如何使用受控组件收集表单数据

创建一个React组件来表示您的表单。
在组件的state中定义一个对象来存储表单数据。
使用受控组件来绑定表单元素的值到state中的属性。
当用户输入表单时，React会自动更新state中的属性。
在表单提交时，您可以通过state来访问表单数据。

如何使用非受控组件收集表单数据

创建一个React组件来表示您的表单。
使用ref来访问表单元素。
在表单提交时，您可以使用ref来获取表单元素的值。

使用受控组件的示例

import React, { useState } from "react";

const Form = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name:</label>
      <input type="text" name="name" value={formData.name} onChange={handleChange} />

      <label>Email:</label>
      <input type="email" name="email" value={formData.email} onChange={handleChange} />

      <input type="submit" value="Submit" />
    </form>
  );
};

export default Form;

使用非受控组件的示例

import React, { useRef } from "react";

const Form = () => {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = {
      name: nameRef.current.value,
      email: emailRef.current.value,
    };
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name:</label>
      <input type="text" name="name" ref={nameRef} />

      <label>Email:</label>
      <input type="email" name="email" ref={emailRef} />

      <input type="submit" value="Submit" />
    </form>
  );
};

export default Form;