При закрытии тега элемент флажка должен быть отключен в группе флажков - PullRequest
Новая
       9

При закрытии тега элемент флажка должен быть отключен в группе флажков

1 голос
/ 17 марта 2020

У меня есть флажок и компонент тега. При проверке каждого элемента ниже отображается тег этого элемента, что достигается с помощью приведенного ниже кода. Но я хочу сопоставить каждый тег с соответствующим элементом флажка. Когда я удаляю тег элемента, соответствующий элемент должен быть снят с флажка. Теперь, когда я удаляю тег, флажок по-прежнему установлен. Ссылка на мой код 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;

1 Ответ

1 голос
/ 17 марта 2020

Похоже, вы неправильно используете компонент Checkbox.Group. У него не должно быть детей, поэтому он портит состояние Checkbox es.

Просто удалите группу, и она заработает.
https://codesandbox.io/s/exciting-bas-9f7gv

...