react - 表單組件

受控組件

表單項中的值（value/checked）受到類組件state中數據來控制，同時還需要綁定一個onChange事件來完成對state中數據的修改

import React, { Component } from 'react';class AppInput extends Component {// 設置受控組件state = {userName: '',passWord: '',userName2: '',passWord2: ''}changeName = event => {this.setState({userName: event.target.value.trim()})}changePassword = event => {this.setState({passWord: event.target.value.trim()})}clickHandler = () => {console.log(this.state)}setValue = event => {this.setState({[event.target.name]: event.target.value.trim()})}render() {const { userName, passWord, userName2, passWord2 } = this.statereturn (<div><label >賬號：<input type="text" value={userName} onChange={this.changeName} /></label><br /><label >密碼：<input type="passWord" value={passWord} onChange={this.changePassword} /></label><br /><button onClick={this.clickHandler}>點擊進入</button><div>{/* 為了簡化代碼還可以使用對象簽名來整合onchange事件 */}<label htmlFor="">賬號：<input type="text" name='userName2' value={userName2} onChange={this.setValue} /></label><br /><label htmlFor="">密碼：<input type="passWord" value={passWord2} name='passWord2' onChange={this.setValue} /></label><br /><button onClick={this.clickHandler}>點擊進入</button></div></div>);}
}export default AppInput;

為了體現react的靈活性，和方便組件拆分，還可以用一種高級寫法

import React, { Component } from 'react';const formState = _this => {return {userName: {value: '',onChange: event => _this.setState({// 下面是對state中的userName進行更新，展開獲取所有的值，在修改更新后的valueuserName: { ..._this.state.userName, value: event.target.value }})},passWord: {value: '',onChange: event => _this.setState(state => ({// passWord : {..._this.state.passWord , value : event.target.value}passWord: Object.assign({}, state.passWord, { value: event.target.value.trim() })}))}}
}
class AppInput02 extends Component {state = {// userName : {//     value : '',//     onChange : event => this.setState({//         // 下面是對state中的userName進行更新，展開獲取所有的值，在修改更新后的value//         userName : {...this.state.userName , value : event.target.value}//     })// },// passWord : {//     value : '',//     onChange : event => this.setState({//         passWord : {...this.state.passWord , value : event.target.value}//     })// }//這樣寫就是為了方便將代碼提取...formState(this)}clickhandler = () => {console.log(this.state)}render() {const { userName, passWord } = this.statereturn (<div><label >賬號：<input type="text" {...userName} /></label><label >密碼：<input type="passWord" {...passWord} /></label><button onClick={this.clickhandler}>點擊進入</button></div>);}
}export default AppInput02;

案例： 全選按鈕

import React, { Component } from 'react';class AppInput03 extends Component {state = {option: ['html', 'css', 'js', 'vue', 'react'],selection: [],selectAll : false}selection = e=> {console.log(e.target.value , e.target.checked)let value = e.target.value// 通過給單選框綁定一個value，在改變的時候通過這個值判斷改變的是哪一個input ，并將選中與否的結果用是否選中數組中是夠存有值來相關聯if(e.target.checked){this.state.selection.push(value)this.state.selectAll = this.state.selection === this.state.option}else{this.state.selection = this.state.selection.filter(itm => itm !== value)// this.state.selectAll = this.state.selection === this.state.optionthis.state.selectAll = false}// 別忘了渲染// this.setState({})this.forceUpdate()}clickHandler =()=> {console.log(this.state)}// 控制是否全選，實際上就是selection數組中是否包含了全部的option數組選項selectAll = (e)=>{this.state.selectAll = e.target.checkedif(e.target.checked){this.state.selection = this.state.option}else{this.state.selection = []}this.forceUpdate()}render() {const { option, selection ,selectAll } = this.statereturn (<div><label >全選：<input type="checkbox"  checked={selectAll} onChange={this.selectAll}/></label><div><ul>{/* 在使用state中結構出來的值時，一定要加{} , 為啥老是忘記*/}{option.map((itm , index) => (<li key={index}>{/* 單選多選框中決定表單是否是受控組件的屬性是 checked ， */}<input type="checkbox" value={itm} checked={selection.includes(itm)} onChange={this.selection}/><span>{itm}</span></li>))}</ul></div><button onClick={this.clickHandler}>查看數據</button></div>);}
}export default AppInput03;