鍍金池/ 問答/HTML/ 全選已好用，但是單獨(dú)的checkbox不好用了，打不上√

全選已好用，但是單獨(dú)的checkbox不好用了，打不上√

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

回答
編輯回答
浪婳

就你的代碼而言，
<Checkbox checked={this.state.checks} onChange={this.onChangea} />
單選沒效果是因?yàn)椋琽nChange的時(shí)候 this.state.checks 的狀態(tài)沒有改變，this也沒有傳入方法里面。
改正后 <Checkbox checked={this.state.checks} onChange={this.onChangea.bind(this)} />
onChangea(e) {

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

}
這時(shí)你會(huì)發(fā)現(xiàn)單選后所有的Checkbox都被選中了，是因?yàn)槟鉉heckbox設(shè)置的checked都是this.state.checks，所以狀態(tài)都會(huì)改變。
所以你的代碼本身就不應(yīng)該這樣寫，這里可以用 CheckboxGroup 去實(shí)現(xiàn)，具體代碼可參考

2018年8月7日 05:10
編輯回答
負(fù)我心
  • 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});
}
2018年2月19日 14:15