第 11 课2026.09.14
让输入内容参与校验、提交或即时预览。
第 11 课：受控输入框
- 日期：2026-09-14
- 课程序号：第 11 课
- 知识点：
value、onChange与单一状态源
用途
让输入内容参与校验、提交或即时预览。
核心概念
受控输入的值来自 state；onChange 更新同一 state，避免 DOM 与业务状态分叉。
最小代码或操作示例
jsx
const [title, setTitle] = useState("");
<input
value={title}
onChange={(event) => setTitle(event.target.value)}
/>3～5 分钟练习
在输入框下显示当前字符数。
参考答案
添加 <p>{title.length} 个字符</p>。
与上一课的联系
上一课提交表单并追加列表；本课先让输入值成为可控状态。
时效校验
时效校验：2026-09-15（React 19.2 当前官方文档）。已复核本课用法，未发现废弃标记；本轮官方资料见下方链接。