React 中的受控组件

偷光2023-07-28 22:03

React 中的受控组件是由 React 组件管理其值的表单组件。它们的值受到 React 组件状态的控制，更新时会通过回调函数进行数据的处理。

受控组件的特点包括：

值由状态控制：受控组件的值是通过 React 组件的状态进行控制和更新的。
通过事件处理器更新值：受控组件通常配合事件处理函数（如 onChange）来更新状态中的值。
可以执行验证和处理逻辑：由于值受到状态的控制，你可以在事件处理器中执行验证和处理逻辑，并在状态更新后对值进行处理。

受控组件：受到 React 状态控制的表单元素

react 文本框的 onChange 事件类似于原生的 input 事件（必须要加，否则报错）

react 对 change 事件做过处理

基本使用：

js 复制代码

import { useState } from "react";

const App = () => {
  // 一个状态
  const [value, setValue] = useState("");
  const [checked, setChecked] = useState("");

  return (
    <div>
      {/* 绑定 value 状态值和 onChange 属性 */}
      <input value={value} onChange={(e) => setValue(e.target.value)}></input>

      <button onClick={() => console.log(value)}>显示</button>
      <button onClick={() => setValue("修改了值")}>修改</button>

      {/* 单选框的使用 */}
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
      {checked ? "选中状态" : "未选中"}
    </div>
  );
};

export default App;