受控输入

文本输入框会引出一个问题：用户在框中输入内容，但你的组件有状态：这段文本由谁管理？在 React 中，答案是：由状态管理。这称为受控输入框：

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

两条连线构成这个循环：

• value={name}：输入框始终显示状态值
• onChange：每次按键都会调用 setter，并传入 e.target.value，也就是输入框当前的文本

这样，输入内容会更新状态，状态会触发重新渲染，输入框会显示新状态。好处是：文本存储在一个变量中，你可以对它进行验证、转换、清空，或在页面的其他位置显示。