表单与受控输入 (Controlled Inputs)

React 课程的一部分

在普通的 HTML <input> 里敲一个字母，浏览器自己就把事情办完了：DOM 元素悄无声息地记住你输入的内容，不必告诉别人。只要应用不需要知道框里此刻装着什么，这样就够用了。可是一旦你要校验它、要在内容看起来不对时禁用按钮、或者要在提交时把它发到别处，“浏览器把它记在某个地方”就不够了，组件必须自己持有这个值的一份副本，并且随每一次按键保持同步。这就是 React 表单的全部思路，而且只要亲手写过一个，之后写的每一个表单都是同一个套路。

设想一块白板，旁边站着一位代笔人：谁都不许直接往板上写，想写什么只能告诉代笔人，代笔人先更新自己的笔记，再把笔记抄到白板上。对一块白板来说这很别扭，但好处是代笔人在任何时刻都握着板上内容的一份准确、最新的副本，根本不用走过去看一眼。受控输入的原理一样：不让浏览器的 <input> 自己保管文本，而是由组件把当前值放在状态（state）里，也就是组件跟踪的、会随时间变化并在变化时触发重新渲染的那类数据，输入框只负责显示状态此刻说的内容。