第 7 课：受控输入框

• 日期：2026-09-08
• 课程序号：第 7 课
• 知识点：受控 input 与 onChange

用途

让 React 状态始终保存输入框当前显示的课程名称。

核心概念

受控输入框的 value 来自状态，onChange 把用户的新输入写回同一份状态。

最小代码或操作示例

function TopicInput() {
  const [topic, setTopic] = useState('React');
  return <input value={topic} onChange={event => setTopic(event.target.value)} />;
}

3～5 分钟练习

在输入框后增加一段文字，实时显示 topic。

参考答案

在 input 后添加 <p>正在学习：{topic}</p>。

与上一课的联系

上一课学习基于旧值批量更新状态；本课把浏览器输入事件中的新值保存为状态。