React 组件的受控和非受控形式

在 React 中，表单组件可以分为受控和非受控两种。受控组件是指表单数据由 state 对象管理，而非受控组件是指表单数据由 DOM 节点管理。

受控组件的特点是，可以实时得到表单数据，因此可以轻松地进行数据验证和更新。但是，由于数据是通过 state 管理的，因此代码会相对复杂一些。

非受控组件的特点是，表单数据在需要时利用 ref 获取，因此可以减少组件的复杂度。但是，由于数据是由 DOM 节点管理的，因此无法实时获取表单数据，需要在提交表单时手动获取。

为了帮助您更好地理解受控和非受控组件，我们提供了一个表格来总结它们的异同：

特性	受控组件	非受控组件
数据管理	state 对象	DOM 节点
实时获取数据	是	否
数据验证	容易	困难
代码复杂度	复杂	简单
使用场景	需要实时获取表单数据	不需要实时获取表单数据

受控组件示例

import React, { useState } from 'react';

const MyComponent = () => {
  const [name, setName] = useState('');

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

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Your name is {name}</p>
    </div>
  );
};

export default MyComponent;

在这个示例中，name 状态变量用于管理输入字段的值。handleChange 函数在输入字段的值发生变化时被调用，并将新值保存到 name 状态变量中。这使得我们可以实时获取表单数据，并将其显示在页面上。

非受控组件示例

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const name = inputRef.current.value;
    alert(`Your name is ${name}`);
  };

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

export default MyComponent;

在这个示例中，inputRef 用于获取输入字段的 DOM 节点。handleSubmit 函数在表单提交时被调用，并将输入字段的值保存在 name 变量中。由于数据是由 DOM 节点管理的，因此我们需要在提交表单时手动获取数据。

总的来说，受控组件和非受控组件各有优缺点，您需要根据具体情况选择合适的组件类型。如果您需要实时获取表单数据，则可以使用受控组件；如果您不需要实时获取表单数据，则可以使用非受控组件。