React受控组件详解

在 React 中，表单元素可以分为受控组件和非受控组件两种。

受控组件是由 React 组件来控制表单元素的值和状态。我们需要在组件的 state 中保存表单元素的值，并通过 onChange 事件来更新 state 中的值。这样，每次表单元素的值发生变化时，都会触发组件的重新渲染，从而保证组件和表单元素的值同步。

受控组件的应用场景主要包括以下几种：

• 表单验证：我们可以在 onChange 事件中验证表单元素的值，并在 state 中保存错误信息。如果表单元素的值不合法，我们可以通过 setState 来更新错误信息，并在 UI 上显示错误提示。
• 动态表单：有些情况下，我们需要根据用户的输入动态生成表单元素。这时候，我们可以将表单元素的数量和类型保存在 state 中，并通过 map 函数来动态渲染表单。

下面是一个受控组件的示例：

import React, { useState } from 'react';

function ControlledComponent() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Username:', username);
    console.log('Password:', password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      </label>
      <label>
        Password:
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

非受控组件是由 DOM 元素本身来控制表单元素的值和状态。我们可以通过 ref 来获取表单元素的值，并在需要时手动更新 UI。由于非受控组件不需要在组件的 state 中保存表单元素的值，所以它们比受控组件更加简单和高效。

非受控组件的应用场景主要包括以下几种：

• 大量数据：如果表单中包含大量数据，将所有数据保存在 state 中会导致性能问题。这时候，我们可以使用非受控组件来避免这个问题。
• 第三方库：有些第三方库（如日期选择器、富文本编辑器等）需要直接操作 DOM 元素，这时候我们可以使用非受控组件来集成这些库。

下面是一个非受控组件的示例：

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Username:', usernameRef.current.value);
    console.log('Password:', passwordRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" ref={usernameRef} />
      </label>
      <label>
        Password:
        <input type="password" ref={passwordRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}