При поиске и установке флажка он не включает предыдущие проверенные значения в консоли - PullRequest
Новая
       14

При поиске и установке флажка он не включает предыдущие проверенные значения в консоли

1 голос
/ 02 ноября 2019

Пожалуйста, найдите мой код в ссылке https://codesandbox.io/s/jolly-kapitsa-vhv2l. Поисковая строка, для поиска A и проверки A. Снова ищем B и проверяем B im, получая только последнее проверенное значение B и значение A не добавляется к нему. Но без поиска и «A», и «B» добавляются к проверенным значениям при индивидуальной проверке. 

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Checkbox, Row, Col, Tooltip, Input } from "antd";
const { Search } = Input;
const metricCols = [
  {
    title: "A",
    columnDescription: "A desc",
    columnName: "a"
  },
  {
    title: "B",
    columnDescription: "B desc",
    columnName: "b"
  },
  {
    title: "C",
    columnDescription: "C desc",
    columnName: "c"
  },
  {
    title: "D",
    columnDescription: "D desc",
    columnName: "d"
  },
  {
    title: "E",
    columnDescription: "E desc",
    columnName: "e"
  }
];

class App extends React.Component {
  state = {
    visible: false,
    items: [],
    selected: [],
    fuzzySearcher: null,
    metricItems: [],
    inputText: ""
  };
  onChange = checkedValues => {
    console.log("checked = ", checkedValues);
    this.setState({ metricItems: checkedValues });
  };
  onMetricsChange = checkedValues => {
    console.log("The checkedValues logged here", checkedValues);
    this.setState({ metricItems: checkedValues });
  };
  handleChangeMetrics = e => {
    this.setState({ inputText: e.target.value });
  };
  render() {
    const { inputText, metricItems } = this.state;
    const filteredMetricItems =
      metricCols.length > 1 &&
      metricCols.filter(item =>
        item["title"].toLowerCase().includes(inputText.toLowerCase())
      );
    return (
      <React.Fragment>
        <Search
          className="search-metrics"
          allowClear={true}
          placeholder="Search Metrics"
          onChange={this.handleChangeMetrics}
        />
        <Checkbox.Group
          defaultValue={metricItems}
          style={{ width: "100%" }}
          onChange={this.onMetricsChange}
        >
          {filteredMetricItems &&
            filteredMetricItems.map(el => (
              <Col span={24} key={el.columnName}>
                <div
                  className="draggable-segment"
                  key={`source-${el.columnName}`}
                >
                  <Tooltip key={el.columnName} title={el.columnDescription}>
                    <Checkbox
                      style={{ fontSize: "12px" }}
                      value={el.columnName}
                      key={el.columnName}
                    >
                      {el.title}
                    </Checkbox>
                  </Tooltip>
                </div>
              </Col>
            ))}
        </Checkbox.Group>
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("container"));
...