Question

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

import { Checkbox, Tag, Button } from "antd";
class Filters extends Component {
  state = {
    tags: []
  };
  onCheck = value => {
    const tags = [...this.state.tags];
    console.log("The values", value);
    value.map(el => !tags.includes(el) && tags.push(el));
    this.setState({ tags });
  };
  onCheck1 = value => {
    const tags = [...this.state.tags];
    value.map(el => !tags.includes(el) && tags.push(el));
    this.setState({ tags });
    console.log("The values", value);
  };
  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"
            onChange={this.onCheck}
            style={{ width: "100%" }}
          >
            <Checkbox value="a">A</Checkbox>
            <Checkbox value="b">B</Checkbox>
          </Checkbox.Group>
        </div>
        <div>
          CHECKBOX 2
          <Checkbox.Group
            name="checkbox_2"
            onChange={this.onCheck1}
            style={{ width: "100%" }}
          >
            <Checkbox value="2a">2A</Checkbox>
            <Checkbox 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>
    );
  }
}

选中一个元素 a 时，它将在下面显示为标签。如果删除标签，则应取消选中 a 。

Answer 1

您好，如果您不想使用复选框组，可以像这样简化代码

https://codesandbox.io/s/crazy-morse-ffkez

filter.js

import React, { Component } from "react";
import "antd/dist/antd.css";
import { Checkbox, Tag, Button } from "antd";
class Filters extends Component {
  state = {
    tags: []
  };

  onCheck = e => {
    const 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
            onChange={this.onCheck}
            checked={tags.includes("a")}
            value="a"
          >
            A
          </Checkbox>
          <Checkbox
            onChange={this.onCheck}
            checked={tags.includes("b")}
            value="b"
          >
            B
          </Checkbox>
        </div>
        <div>
          CHECKBOX 2
          <Checkbox
            onChange={this.onCheck}
            checked={tags.includes("2a")}
            value="2a"
          >
            2A
          </Checkbox>
          <Checkbox
            onChange={this.onCheck}
            checked={tags.includes("2b")}
            value="2b"
          >
            2B
          </Checkbox>
        </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;

如何在React JS中在删除其标签时取消选中选中的元素

1 个答案: