受控组件
const [ value, setValue ] = useState('');
<input type="text" value={value} onChange={ e => setVavlue(e.target.value) } />
- 输入框的value是通过开发者的人为干预来决定，则该input为受控组件
- 同理select、textarea如果通过state来控制value则为受控组件
非受控组件
const inputRef = useRef();
<input type="text" ref={inputRef}/>
- 输入框的内容由用户自己输入决定，则为非受控组件。同时可以通过inputRef可以获取到input的value。
exception
- input type 为file只能是非受控组件，开发者无法干预file的value值
- 当value值为null或者undefined时，受控组件将变为非受控组件
<input value={null} /> // 可输入任意值
- 非受控组件可以设置defaultValue，之后的输入都为非受控
how do i choise
| 功能 | 非受控组件 | 受控组件 |
|---|---|---|
| 一次性验证所有表单项 | ✔️ | ✔️ |
| 提交表单的时候验证 | ✔️ | ✔️ |
| 实时验证 | ❌ | ✔️ |
| 有条件的禁用button | ❌ | ✔️ |
| 改写输入的格式 | ❌ | ✔️ |
| 多个输入组织到一起 | ❌ | ✔️ |
| 动态输入 | ❌ | ✔️ |
| 如何选择受控非受控：react官方推荐的一篇文章 |
