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;