表单简介

表单的重要性

在 React 中，表单在所有 DOM 元素中扮演着特殊角色，其工作方式与其他元素略有不同，因为表单元素自身已经具备某种状态，而这种状态最初与 React 无关。

文本输入框的状态取决于用户输入的值，复选框或单选按钮的状态取决于是否被选中，而 <select></select> 下拉列表则维护着一个或多个被选中的 <option></option> 选项的状态。React 并不会直接修改这些值。如果你习惯使用表单自身的状态，可以继续无障碍地使用，这不会对你组件的开发造成任何影响。

受控组件与非受控组件

React 将这类依赖自身状态的组件称为非受控组件，因为 React 不参与其状态管理。此时状态的处理要么完全独立于 React，要么仅将 DOM 表单状态单向同步到 React 状态，而不会反向更新。这意味着当 React 状态发生变化时，表单元素无法感知，仍会保持原有的值或状态（对于复选框、下拉框和单选按钮而言，即原有的选中状态）。

相反，受控组件与 React 状态深度绑定：React 状态的更新会直接影响表单元素的值或状态，反之亦然。虽然受控组件的实现更为复杂，但它们更安全可靠，能够有效避免 DOM 状态与 React 状态不一致的问题。