Как снять флажок Checkbox.Group в Antd React.js

Question

У меня есть следующий код, использующий https://ant.design/components/checkbox/, и пытающийся снять флажок, когда флажок установлен. Я не хочу проверять все, если кнопка нажата, просто снимите все флажки или один флажок выбран.

constructor(props) {
        super(props);
        this.state = {
            checked: true,
        }
        this.onChange = this.onChange.bind(this);
    }


    onChange(value) {
        this.props.onChangeSession(value)
    }

    onChangeBox = e => {
        this.setState({
            checked: e.target.checked,
        });
    };

    unChecked = () => {
        this.props.onChangeSession([])
        this.setState({
            checked: false
        });
    };


    render () {
        const {
            data,
        } = this.props
        return  (
            <div>
                <Button type="primary" size="small" onClick={this.unChecked}>
                   Uncheck
                </Button>
                <Checkbox.Group 
                    style={{ width: '100%' }} 
                    onChange={this.onChange}>
                    <div>
                        <div className="filter-subhead">Track</div>

                        {data.map(i => 
                            <div className="filter-item">
                                <Checkbox
                                checked={this.state.checked}
                                onChange={this.onChangeBox}
                                value={i}>{i}</Checkbox>
                            </div>
                        )}                     
                    </div>
                </Checkbox.Group> 
            </div>

        )
    }

Любая помощь будет признательна!

Answer 1

Рабочая ссылка

Переключатель на флажке не работает из-за Checkbox.Group, вы можете просто использовать Checkbox

---

Относительно флажкаСостояние:

Вы не можете иметь один state для всех флажков, поэтому вам потребуется массив bool, который будет служить состоянием для каждого элемента флажка.

В этом примере я инициализировал состояние флажка на componentDidMount, и он создает массив ([false,false,false,...]), и то же самое используется для сброса на Uncheck.( Возможность рефакторинга в моем коде )

Назначенное пользователем состояние решит, устанавливать флажок или нет.

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

let data = [3423, 3231, 334234, 55345, 65446, 45237];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkboxArray: []
    };
    // this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    let createEmptyArray = new Array(data.length).fill(false);
    this.setState({ checkboxArray: createEmptyArray });
  }

  onChange(e) {
    console.log(e.target);
  }

  onChangeBox = (e, i) => {
    let checkBoxCurrentState = this.state.checkboxArray;
    checkBoxCurrentState[i] = !checkBoxCurrentState[i];
    this.setState({
      checkboxArray: checkBoxCurrentState
    });
  };

  unChecked = e => {
    let resetArray = new Array(data.length).fill(false);
    this.setState({
      checkboxArray: resetArray
    });
  };

  render() {
    const { data } = this.props;
    return (
      <div>
        <Button type="primary" size="small" onClick={this.unChecked}>
          Uncheck
        </Button>

        <div>
          <div className="filter-subhead">Track</div>
          {data.map((i, index) => (
            <div className="filter-item">
              <Checkbox
                checked={this.state.checkboxArray[index] ? true : false}
                onChange={e => this.onChangeBox(e, index)}
                value={index}
              >
                {JSON.stringify(this.state.checkboxArray[index])}
              </Checkbox>
            </div>
          ))}
        </div>
        {JSON.stringify(this.state.checkboxArray)}
      </div>
    );
  }
}

ReactDOM.render(<App data={data} />, document.getElementById("root"));

Простое копирование и вставка приведенного выше кода иПри необходимости добавьте реквизиты.

И если вы хотите, чтобы пользователь Checkbox.Group, нужно будет обновить метод onChange CheckBox.Group

let data = ['Apple', 'Pancakes', 'Butter', 'Tea', 'Coffee'];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkboxArray: []
    };
    // this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    let createEmptyArray = new Array(this.props.data.length).fill(false);
    this.setState({ checkboxArray: createEmptyArray });
  }

  onChangeBox = (e, i) => {
    let checkBoxCurrentState = this.state.checkboxArray;
    checkBoxCurrentState[i] = !checkBoxCurrentState[i];
    this.setState({
      checkboxArray: checkBoxCurrentState
    });
  };

  unChecked = () => {
    let resetArray = new Array(data.length).fill(false);
    this.setState({
      checkboxArray: resetArray
    });
  };

  render() {
    const { data } = this.props;
    return (
      <div>
        <button onClick={this.unChecked}>Clear All</button>
        {this.props.data.map((single, index) => (
          <div>
            <input
              type="checkbox"
              id={index}
              name="scales"
              checked={this.state.checkboxArray[index]}
              onChange={e => this.onChangeBox(e, index)}
            />
            <label for={index}>{single}</label>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App data={data} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Если вы собираетесь использовать map для динамической генерации флажков, использование состояния для отслеживания проверенного значения будет непростым делом. Вы не должны этого делать.

Что вам следует сделать, это вообще не включать checked реквизит в компонент.

<Checkbox
    onChange={this.onChangeBox}
    value={i}>{i}
</Checkbox>

Флажок должен по-прежнему проверяться, даже если вы не включили проверенный реквизит. Это немного странно, я знаю.

Вместо этого просто передайте значение в функцию onChangeBox, обработайте всю свою логику и установите значение состояния при изменении.

Я только что проверил это, и оно работает.