React中的表单元素

在web应用开发当中，表单还是很重要的元素。
1.应用表单组件有：文本框（input、textarea）、单选按钮和复选框、Select组件。
文本框：文本框的状态改变即文本框中的内容的改变。此时的state应该是inputValue或者是textareaValue。在状态改变时的处理函数应该是

handleInputChange(e){    this.setState({        inputValue:e.target.value    });}

单选按钮和复选框：
1.单选按钮：它的状态state就是radioValue

this.state = {    radioValue:''};//在这里只是设置了radioValue的值，因为单选按钮本来就是只有一个按钮被选中//当用户点击单选按钮的时候，就会通过下面的函数获取到选中的按钮的value//即radioValuehandleChange(e){    this.setState({        radioValue:e.target.value,    })}//下面通过===一次判断每个input标签的值和radioValue是否相等来判断checked的值是true还是false<input     type="radio"    value="male"    checked={radioValue === 'male'}    onChange = {this.handleChange}/><input     type="radio"    value="female"    checked={radioValue === 'female'}    onChange={this.handleChange}/>

2.复选框：它的状态是通过一个数组来保存的，因为复选，即就应该保存选中的多个复选框，以便用户进行操作，从而改变状态而重新渲染。

this.state = {    coffee:[],}//通过一个数组来保存状态handleChange(e){    const {checked,value} = e.target;    let {coffee} = this.state;    //判断这个复选框是否被选中    if(checked && coffee.indexOf(value) === -1){        coffee.push(value);    }else{        coffee = coffee.filter(i => i !== value);    }    this.setState({        coffee,    });}

然后通过coffee.indexOf(‘aa’) 去遍历coffee这个数组，是否能找到和aa相同的字符串，来进行复选框checked是true还是false的判断。

<p>请你选择你最喜欢的咖啡</p><label>    <input         type="checkbox"        value="aa"        checked={coffee.indexOf('aa') !== -1}        onChange={this.handleChange}    />    aa</label><br/><label>    <input         type="checkbox"        value="bb"        checked={coffee.indexOf('bb') !== -1}        onChange={this.handleChange}    /></label>

3.Select组件：如果是单选，就用单个变量保存，如果是多选就用一个数组保存。
单选：

this.state = {    area:'',}handleChange(e){    this.setState({        area:e.target.value,    });}render(){    const {area} = this.state;    return(        <select value={area} onChange={this.handleChange}>            <option value="beijing">北京</option>            <option value="shanghai">上海</option>            <option value="hangzhou">杭州</option>        </select>    )}

多选

this.state = {    area:['beijing','shanghai'],};handleChange(e){    const {options} = e.target;    //注意，这里返回的options是一个对象，并非数组    const area = Object.keys(options).    filter(i => options[i].selected === true)    .map(i => options[i].value);    this.setState({        area,    });}render(){    const {area} = this.state;    return(        <select multiple={true} value={area} onChange={this.handleChange}>            <option value="beijing">北京</option>            <option value="shanghai">上海</option>            <option value="hangzhou">杭州</option>        </select>    );}