React 表单处理

November 4, 2024

React 表单处理

在 React 中，表单元素（如输入框、选择框等）通常作为受控组件来处理，以便更好地管理用户输入。受控组件通过 React 的 state 管理输入的值，从而实现双向绑定。React 也提供了处理非受控组件的方式，适用于某些特定需求。

一、受控组件

受控组件是指其输入值受 React 的 state 控制的表单元素。通常在表单元素的 value 属性中绑定 state，在 onChange 事件中更新 state。

示例：受控输入框


  import { useState } from 'react';

  function ControlledForm() {
    const [name, setName] = useState('');

    const handleChange = (event) => {
      setName(event.target.value); // 更新 state
    };

    const handleSubmit = (event) => {
      event.preventDefault(); // 阻止表单的默认提交行为
      alert(`Submitted name: ${name}`);
    };

    return (
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" value={name} onChange={handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }

在上述代码中：

输入框的 value 属性绑定到 state (name)，实现单向绑定。在 onChange 事件中更新 state，实现双向绑定。 handleSubmit 方法阻止表单的默认提交行为，使用 alert 显示输入的值。

二、处理多个输入字段

对于多个输入字段，可以使用对象来管理 state，并在 onChange 事件中动态更新相应的字段。

示例：多字段表单


  import { useState } from 'react';

  function MultiFieldForm() {
    const [formData, setFormData] = useState({ username: '', 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>
          Username:
          <input
            type="text"
            name="username"
            value={formData.username}
            onChange={handleChange}
          />
        </label>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }

在这里，我们使用 formData 对象管理多个字段，name 属性用于在 onChange 中识别并动态更新相应字段的值。

三、表单验证

在 React 中可以通过条件判断的方式添加基本的表单验证逻辑。

示例：基本表单验证


  import { useState } from 'react';

  function ValidatedForm() {
    const [email, setEmail] = useState('');
    const [error, setError] = useState('');

    const handleChange = (event) => {
      setEmail(event.target.value);
    };

    const handleSubmit = (event) => {
      event.preventDefault();
      if (!email.includes('@')) {
        setError('Invalid email address');
      } else {
        setError('');
        alert(`Submitted email: ${email}`);
      }
    };

    return (
      <form onSubmit={handleSubmit}>
        <label>
          Email:
          <input type="email" value={email} onChange={handleChange} />
        </label>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button type="submit">Submit</button>
      </form>
    );
  }

在这个例子中：

提交表单时检查 email 是否包含 @ 符号。如果验证失败，显示错误消息；否则清除错误并显示成功提示。

四、非受控组件

非受控组件是指其输入值由 DOM 自身管理的表单元素。React 提供了 ref 可以直接访问 DOM 元素，用于获取非受控组件的值。

示例：非受控组件


  import { useRef } from 'react';

  function UncontrolledForm() {
    const inputRef = useRef(null);

    const handleSubmit = (event) => {
      event.preventDefault();
      alert(`Input value: ${inputRef.current.value}`);
    };

    return (
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" ref={inputRef} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }

在上述代码中：

使用 useRef 创建一个 ref，并将其绑定到输入框。表单提交时，直接通过 inputRef.current.value 访问输入的值，而无需使用 state。

五、选择框和复选框的处理

React 中的选择框和复选框可以通过类似的方式进行控制。

示例：选择框和复选框


  import { useState } from 'react';

  function SelectCheckboxForm() {
    const [isChecked, setIsChecked] = useState(false);
    const [selectedOption, setSelectedOption] = useState('');

    const handleCheckboxChange = (event) => {
      setIsChecked(event.target.checked);
    };

    const handleSelectChange = (event) => {
      setSelectedOption(event.target.value);
    };

    return (
      <form>
        <label>
          Agree to terms:
          <input
            type="checkbox"
            checked={isChecked}
            onChange={handleCheckboxChange}
          />
        </label>

        <label>
          Choose an option:
          <select value={selectedOption} onChange={handleSelectChange}>
            <option value="">Select...</option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
          </select>
        </label>
      </form>
    );
  }

在该示例中：

复选框的 checked 属性与 isChecked 状态绑定，选择框的 value 与 selectedOption 状态绑定。 onChange 事件用于更新复选框的选中状态和选择框的选项值。

六、总结

React 提供了多种方式来处理表单，适用于不同需求：

受控组件：通过 state 实现双向绑定，适合大多数表单场景。非受控组件：通过 ref 直接访问 DOM 值，适合简单的、无需频繁更新的表单场景。多字段表单：利用对象管理多个输入字段，简化代码。表单验证：在 onSubmit 或 onChange 中进行条件判断，实现简单验证。通过这些方式，可以实现高效、可控的 React 表单处理。