React 中如何处理表单？

推荐答案

在 React 中处理表单通常有两种方式：受控组件和非受控组件。

受控组件

受控组件是指表单数据由 React 组件管理。每个表单元素的值都存储在组件的 state 中，并通过 onChange 事件来更新。

// www.javascriptcn.com code example
import React, { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${name}`);
  };

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

export default ControlledForm;

非受控组件

非受控组件是指表单数据由 DOM 本身管理。可以使用 ref 来获取表单元素的值。

// www.javascriptcn.com code example
import React, { useRef } from 'react';

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

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

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

export default UncontrolledForm;

本题详细解读

受控组件

• 优点：表单数据由 React 组件管理，可以实时验证和更新 UI。
• 缺点：每个表单元素都需要一个 onChange 处理函数，代码量较大。

非受控组件

• 优点：代码简洁，适用于简单的表单。
• 缺点：表单数据由 DOM 管理，React 无法实时控制表单状态。

使用场景

• 受控组件：适用于需要实时验证、动态更新 UI 或复杂表单的场景。
• 非受控组件：适用于简单表单或需要与第三方库集成的场景。

总结

在 React 中处理表单时，应根据具体需求选择受控组件或非受控组件。受控组件提供了更多的控制能力，而非受控组件则更加简洁。