在web应用开发当中，表单还是很重要的元素。

应用表单组件有：文本框（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

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的判断。

请你选择你最喜欢的咖啡
        aa
    

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

1.单选：

this.state = {    area:'',}handleChange(e){    this.setState({        area:e.target.value,    });}render(){    const {area} = this.state;    return(                    北京            上海            杭州            )}

2.多选

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(                    北京            上海            杭州            );}