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或者一些其他原因，我们不希望使用受控组件时，可以选择“非受控组件”技术，这里不再展开。