关闭标签时，复选框元素应在复选框组中取消选中

Question

我有一个复选框和一个标签组件。在检查每个元素时，该元素的标签会显示在下方，这是通过以下代码实现的。但我想将每个标签与相应的复选框元素进行映射。当我删除一个元素的标签时，应该从复选框中取消选中相应的元素。现在，当我删除标签时，复选框仍处于选中状态。链接到我的代码https://codesandbox.io/s/quizzical-borg-77nlv

import React, { Component } from "react";
import { Checkbox, Tag } from "antd";
class Filters extends Component {
  state = {
    tags: []
  };
  onCheck = e => {
    let tags = [...this.state.tags];

    tags = tags.filter(v => v !== e.target.value);

    e.target.checked && tags.push(e.target.value);

    this.setState({ tags });
  };

  onCloseTag = (e, i) => {
    e.preventDefault();
    this.setState({
      tags: this.state.tags.filter((_, index) => index !== i)
    });
  };

  render() {
    const { tags } = this.state;
    return (
      <React.Fragment>
        <div>
          CHECKBOX 1
          <Checkbox.Group name="checkbox_1" style={{ width: "100%" }}>
            <Checkbox
              onChange={this.onCheck}
              checked={tags.includes("a")}
              value="a"
            >
              A
            </Checkbox>
            <Checkbox
              onChange={this.onCheck}
              checked={tags.includes("b")}
              value="b"
            >
              B
            </Checkbox>
          </Checkbox.Group>
        </div>
        <div>
          CHECKBOX 2
          <Checkbox.Group
            name="checkbox_2"
            onChange={this.onCheck1}
            style={{ width: "100%" }}
          >
            <Checkbox
              onChange={this.onCheck}
              checked={tags.includes("2a")}
              value="2a"
            >
              2A
            </Checkbox>
            <Checkbox
              onChange={this.onCheck}
              checked={tags.includes("2b")}
              value="2b"
            >
              2B
            </Checkbox>
          </Checkbox.Group>
        </div>
        <div style={{ margin: "1rem" }}>
          {tags.map((tag, i) => (
            <Tag
              className="quick-filter-tag-main"
              key={i}
              closable
              onClose={e => this.onCloseTag(e, i)}
              color="#f50"
            >
              {tag}
            </Tag>
          ))}
        </div>
      </React.Fragment>
    );
  }
}
export default Filters;

Answer 1

您似乎误用了Checkbox.Group 组件。它不应该有孩子，所以它搞乱了Checkboxes 状态。

只需删除组即可。
https://codesandbox.io/s/exciting-bas-9f7gv