前端面试 P079：受控表单与非受控输入

来源：方格前端讲面试 · 9.受控组件和非受控组件有什么区别？，13 分 36 秒。

回看定位：00:49 数据归属 · 06:38 非受控 · 11:42 文件

看当前值由谁维护

受控输入由 value 或 checked 规定当前显示状态，并通过 onChange 等事件请求更新；非受控输入由 DOM 保留当前值，React 可给 defaultValue/defaultChecked，并在提交等边界读取。

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

受控值应保持合理类型，不要在同一个输入生命周期里随意在 undefined 与字符串之间切换控制方式。复选框通常控制 checked，而不是把 value 当成勾选状态。

非受控并非必须每项使用 ref

function Form() {
  function submit(event) {
    event.preventDefault();
    const name = new FormData(event.currentTarget).get('name');
    console.log(name);
  }
  return <form onSubmit={submit}><input name="name" defaultValue="Guest" />
    <button type="submit">提交</button></form>;
}

原生表单与 FormData、专门表单库也能组织校验和提交，不能简单说非受控“非常脆弱”或实时交互只能由一种方式实现。选择取决于同步界面需求、库设计和可维护性。

文件输入的边界

不能任意用字符串设定本地文件路径。文件列表通常由用户选择，读取 input.files 或 FormData；程序通常可通过空字符串清除输入，不宜绝对说 value 在任何情况下都不可写。

聚焦和测量可以通过 ref 完成，受控输入也同样能用 ref；这些命令行为不是非受控表单专属优势。

依据：React：input。