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

Question

importReactfrom'react';import{Link}from'dva/router'import{Menu,Icon,Avatar,Layout,Breadcrumb,Button,notification,Select,Pagination,Checkbox,Input}from'antd';importlogofrom'../css/App.css';importayjsfrom'../css/ayjs.css';importReactDOMfrom'react-dom';
classSiderextendsReact.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(

Answer 1

就你的代码而言，单选没效果是因为，onChange的时候this.state.checks的状态没有改变，this也没有传入方法里面。改正后onChangea(e){this.setState({checks:e.target.checked,});}这时你会发现单选后所有的Checkbox都被选中了，是因为你Checkbox设置的checked都是this.state.checks，所以状态都会改变。所以你的代码本身就不应该这样写，这里可以用CheckboxGroup去实现，具体代码可参考

Answer 2

renderreturn(c)}onChange={()=>this.onChange()}/>this.onChange(1)}/>this.onChange(2)}/>this.onChange(3)}/>);stateconstructor(props){super(props);this.state={checks:[false,false,false]};}onChangeonChange(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;}returnc;});}this.setState({checks});}