全选已好用，但是单独的checkbox不好用了，打不上√

Question

import React from 'react';
import { Link } from 'dva/router'
import { Menu, Icon, Avatar, Layout, Breadcrumb, Button, notification, Select, Pagination, Checkbox, Input} from 'antd';
import logo from '../css/App.css';
import ayjs from '../css/ayjs.css';
import ReactDOM from 'react-dom';

class Sider extends React.Component{

        state ={
        check:false,
        checks:false,
       }
       
        showInput=(e)=>{//全选和全不选
          console.log(e.target.checked);
            this.setState({
              check:e.target.checked,
              checks:e.target.checked,
                    })
            }

      onChangea(e) {
      console.log(`checked = ${e.target.checed}`);             
    }

render() {

return (

    <div style={{width:"100%"}}>          
      <Checkbox checked={this.state.check} onChange={this.showInput} /><br/>         
      <Checkbox   checked={this.state.checks} onChange={this.onChangea} />
      <Checkbox   checked={this.state.checks} onChange={this.onChangea} />
      <Checkbox   checked={this.state.checks} onChange={this.onChangea} />                 
    </div>

);

}
};
export default Sider

Answer 1

就你的代码而言，
<Checkbox checked={this.state.checks} onChange={this.onChangea} />
单选没效果是因为，onChange的时候 this.state.checks 的状态没有改变，this也没有传入方法里面。
改正后 <Checkbox checked={this.state.checks} onChange={this.onChangea.bind(this)} />
onChangea(e) {

  this.setState({
      checks:e.target.checked,
  });            

}
这时你会发现单选后所有的Checkbox都被选中了，是因为你Checkbox设置的checked都是this.state.checks，所以状态都会改变。
所以你的代码本身就不应该这样写，这里可以用 CheckboxGroup 去实现，具体代码可参考

Answer 2

• render

return(
     <div style={{width:"100%"}}>          
      <Checkbox checked={this.state.checks.every(c => c)} onChange={() => this.onChange()} /><br/>         
      <Checkbox   checked={this.state.checks[0]} onChange={() => this.onChange(1)} />
      <Checkbox   checked={this.state.checks[1]} onChange={() => this.onChange(2)} />
      <Checkbox   checked={this.state.checks[2]} onChange={() => this.onChange(3)} />                 
    </div>
);

• state

constructor(props) {
    super(props);
    this.state = {checks: [false, false, false]};
}

• onChange

onChange(index) {
    let {checks} = this.state;
    if(!index) {
        checks = checks.map(() => !checks.some(c => c));
    } else {
        checks = checks.map((c, i) => {
            if((i + 1) === Number(index)) {
                return !c;
            }
            return c;
        });
    }
    this.setState({checks});
}