react入坑之表单

在React中存在一个“受控组件（Controlled Component）”的概念，专门指代被React控制了的表单元素。通过onChange事件的处理函数将表单元素值的变化映射到组件的state中，然后再将组件中的这个映射好的值通过{}在JSX中插值给表单元素的value，（二者缺一不可）这就是一个被React控制了的组件也即“受控组件”了。
class Form extends React.Component {  constructor (props) {    super(props)    this.state ={      inputTextValue: ''    }    this.handleInputTextChange = this.handleInputTextChange.bind(this)  }  render () {    return (      <form>        <input          value={this.state.inputTextValue} // 从state中将值绑定到表单元素          onChange={this.handleInputTextChange}/>       </form>    )  }  handleInputTextChange (e) {    this.setState({      inputTextValue: e.target.value // 将表单元素的值的变化映射到state中    })   }}ReactDOM.render(  <Form />,  document.getElementById('root'))

基本上所有表单元素的使用都跟上例一样，通过value来“控制”元素，让state成为组件唯一的状态保存地。但是有时候在非React项目中使用React或者一些其他原因，我们不希望使用受控组件时，可以选择“非受控组件”技术，这里不再展开。