React双向绑定复选框

思路：1. 为复选框们添加onChange事件——获取被选中的复选框们

           2. onChange时会发生什么？

             （1）将所有选中的复选框的value值，push到一个数组（checkArr）中

             （2）若取消选中，则将其从checkArr中减掉

             （3）利用setState更新checkArr

           3. 修改复选框状态

               复选框的状态由其checked属性控制

               checked=true则是选中状态，checked=false是未被选中的状态。

               因此，若复选框的value值在checkArr中，则为true，让其选中，反之则为false，未选中。

import React from 'react'
class Checkbox extends React.PureComponent {
    state = {
        checkArr: []
    }
    //获取
    handle=(e)=>{
        //由于组件继承的是purecomponent,因此要将数组复制一次
        let _checkArr = [...this.state.checkArr]
        if (e.target.checked) {
            //将所有选中的复选框的value值，push到一个数组（checkArr）中
            _checkArr.push(e.target.value)
        } else {
            //若取消选中，则将其从checkArr中减掉
            _checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)
        }
        //利用setState更新checkArr
        this.setState({
            checkArr:_checkArr
        })
    }
    render() {
        return <div>
            {this.state.checkArr}
            <input type='checkbox'
                   name='box'
                   value='c1'
                   onChange={this.handle} 
                   checked={this.state.checkArr.indexOf('c1')!==-1}/>1
            <input type='checkbox'
                   name='box'
                   value='c2'
                   onChange={this.handle}
                   checked={this.state.checkArr.indexOf('c2')!==-1} />2
            <input type='checkbox'
                   name='box'
                   value='c3'
                   onChange={this.handle} 
                   checked={this.state.checkArr.indexOf('c3')!==-1}/>3
        </div>
    }
}
export default Checkbox

获取： 

修改：

 state = {
        //添加个c1
        checkArr: ['c1']
    }

       默认选中c1