1. 程式人生 > >react入坑之表單

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或者一些其他原因,我們不希望使用受控元件時,可以選擇“非受控元件”技術,這裡不再展開。