表单分为两种，一种是受控表单，一种是非受控表单。
受控表单（受控组件）
- 定义
- state作为唯一数据驱动源，且用户对表单的操作需要反馈到state
- 特征
- 表单的value由state决定，监听表单变化后从event获取新value重新设置state
- 例子
class App extends React.Component {
constructor(props){
super(props)
this.state = {val: 'H'}
}
render() {
return (
<div>
<input value={this.state.val} onChange={this.handleInputChange.bind(this)}/>
</div>
)
}
handleInputChange(e) {
this.setState({val: e.target.value.toUpperCase()})
}
}
ReactDom.render(<App/>, document.querySelector('#root'))
问题
- 什么是受控组件？什么是非受控组件？
- 像上面这种受React控制的表单， state作为唯一数据驱动源，且用户对表单的操作需要反馈到state就叫受控表单；反之，是非受控表单
- 表单设置了value。如果未设置事件监听事件或者监听函数未对state重新赋值，有什么表现？
- 无法进行修改操作
非受控表单
- <input type="file" />这种表单就是非受控表单
