¿Cómo borrar las casillas de verificación en checbox.group?

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Checkbox } from "antd";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedList: [],
      checkAll: false
    };
  }

  groupChange = checkList => {
    this.state({
      checkList
    });
  };

  clearAll = e => {};

  render() {
    return (
      <div>
        <Checkbox onChange={this.clearAll}>Clear all</Checkbox>
        <Checkbox.Group
          value={this.state.checkList}
          onChange={this.groupChange}
        >
          <Checkbox value={1}>One</Checkbox>
          <Checkbox value={2}>Two</Checkbox>
        </Checkbox.Group>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
1
Alvin 24 oct. 2019 a las 07:06

1 respuesta

La mejor respuesta

Tienes que pasar las opciones en el grupo de casillas de verificación en lugar de <checkbox> como un niño

Codesandbox: https://codesandbox.io/s/quirky-buck-9prg2

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Checkbox } from "antd";

const options = [{ label: "One", value: 1 }, { label: "Two", value: 2 }];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedList: [],
      checkAll: false
    };
  }

  groupChange = checkList => {
    this.state({
      checkList
    });
  };

  clearAll = e => {
    this.setState({ checkedList: e.target.checked ? [1, 2] : [] });
  };

  render() {
    return (
      <div>
        <Checkbox onChange={this.clearAll}>Clear all</Checkbox>
        <Checkbox.Group
          options={options}
          value={this.state.checkedList}
          onChange={this.groupChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
4
Nihal Saxena 24 oct. 2019 a las 05:00