react入坑之表單
阿新 • • 發佈:2019-02-08
在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或者一些其他原因,我們不希望使用受控元件時,可以選擇“非受控元件”技術,這裡不再展開。