Select all is easy to use, but the separate checkbox is not easy to use, so it can't be ticked.

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

Mar.05,2021

as far as your code is concerned,
< Checkbox checked= {this.state.checks} onChange= {this.onChangea} / >
radio does not work because the state of the this.state.checks does not change during onChange, and the this is not passed into the method.
corrected < Checkbox checked= {this.state.checks} onChange= {this.onChangea.bind (this)} / >
onChangea (e) {

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

}
at this point you will find that all Checkbox are selected after the selection, because the checked set by your Checkbox is this.state.checks, so the state will change.
so your code itself should not be written this way. Here you can use CheckboxGroup to implement it. specific code can be found in

.
  • render
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});
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e8930e-f35.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e8930e-f35.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?