React中的表单、受控组件与非受控组件

表单分为两种，一种是受控表单，一种是非受控表单。

受控表单（受控组件）

• 定义
  • 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" />这种表单就是非受控表单