表单，受控组件和非受控组件的选择

不受控

1 .传统的HTML表单输入一样，使用ref获取他的值
2 .在onChange事件中获取
3 .

受控制

<input value={someValue} onChange={handleChange} />

1 .表单的值完全由state决定，修改也是在回调里面修改state
2 .优势

*   就地反馈，例如验证
*   除非所有字段都有有效数据，否则禁用按钮
*   强制使用特定的输入格式，例如信用卡号

3 .

<input type="text" />   value="string"  onChange    event.target.value
<input type="checkbox" />   checked={boolean}   onChange    event.target.checked
<input type="radio" />  checked={boolean}   onChange    event.target.checked
<textarea />    value="string"  onChange    event.target.value
<select />  value="option value"    onChange    event.target.value

对比如下

| 特征 | 不受控制 | 受控 |
| --- | --- | --- |
| 一次性取值（例如，提交时） | ✅ | ✅ |
| [提交时验证](https://goshakkk.name/submit-time-validation-react/) | ✅ | ✅ |
| [即时现场验证](https://goshakkk.name/instant-form-fields-validation-react/) | ❌ | ✅ |
| [有条件地禁用提交按钮](https://goshakkk.name/form-recipe-disable-submit-button-react/) | ❌ | ✅ |
| 强制输入格式 | ❌ | ✅ |
| 一个数据的多个输入 | ❌ | ✅ |
| [动态输入](https://goshakkk.name/array-form-inputs/) | ❌ | ✅ |