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

Working Link

由于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，则需要更新CheckBox.Group的onChange方法

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函数并在那里处理所有逻辑并在更改时设置状态值即可。

我刚刚对其进行了测试，并且可以正常工作。

如何在Antd React.js中取消选中Checkbox.Group

2 个答案:

关于复选框状态：

用户分配的状态将决定是否选中此复选框。