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 (
      

         
      
    )
  }
  handleInputTextChange (e) {
    this.setState({
      inputTextValue: e.target.value // 将表单元素的值的变化映射到state中
    }) 
  }
}

ReactDOM.render(
  
,
  document.getElementById('root')
)

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