什么是受控组件？

参考答案：

受控组件（Controlled Component）是指一个表单元素的值由 React 组件的状态（state）控制，而不是由 DOM 元素自身控制。也就是说，表单元素的值和状态都是由 React 组件的 state 进行管理的，表单元素的值由组件的 state 决定，并通过事件处理函数来更新 state。

受控组件的特点

1. 状态管理：

   • 由组件状态控制：受控组件的表单元素（如 <input>、<textarea> 和 <select>）的值由 React 组件的 state 控制。表单元素的值始终与组件的 state 保持同步。

2. 单向数据流：

   • 从上到下：表单元素的值由组件的 state 决定，当用户输入或选择时，事件处理函数会更新组件的 state，进而重新渲染表单元素。数据流是单向的，即数据从组件的 state 流向表单元素。

3. 事件处理：

   • 更新状态：每当用户对表单元素进行交互时（如输入文本、选择选项），会触发相应的事件处理函数，这些函数会更新组件的 state。组件的 render 方法会根据更新后的 state 重新渲染表单元素。

受控组件的示例

以下是一个使用受控组件的示例，其中 <input> 元素的值由组件的 state 控制：

import React, { useState } from 'react';

function ControlledForm() {
  // 初始化状态
  const [value, setValue] = useState('');

  // 处理输入变化的函数
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  // 处理表单提交的函数
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('提交的值: ' + value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        输入内容:
        {/* 受控组件 */}
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default ControlledForm;

题目要点：

• 受控组件：表单元素的值由组件的 state 控制，表单的值和状态通过 state 管理。
• 单向数据流：表单值从 state 流向表单元素，用户的输入会触发事件更新 state。
• 事件处理：通过事件处理函数更新组件的 state，从而重新渲染表单元素。

使用受控组件可以使表单数据更容易管理和验证，并且与组件的状态保持一致。