javascript - 如何在单击交叉选项时从应用的过滤器中删除元素？- Reactjs/JavaScript

问题描述

我正在做一个 React 演示项目。这是演示

我使用两列创建了过滤器。现在我选择的任何过滤器都会显示在页面的顶部。现在我可以通过取消下拉菜单来删除过滤器。但我也想从显示过滤器的顶部区域删除过滤器。如您所见，在应用的过滤器顶部 div 中有一个交叉选项。当我单击任何应删除 div 的交叉选项时，也应删除相应的下拉菜单。

这是我整个页面的代码

import React from "react";
import { render } from "react-dom";
import { makeData } from "./Utils";

import Select from "react-select";
import "react-select/dist/react-select.css";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

 import jsondata from "./sample";

 class App extends React.Component {
  constructor() {
super();
this.state = {
  // data: makeData(),
  data: jsondata,
  filtered: [],
  firstNameselect: [],
  lastNameselect: []
};
this.uniqueOptions = this.uniqueOptions.bind(this);
this.handleFilter = this.handleFilter.bind(this);
 }

   onFilteredChangeCustom(value, accessor) {
console.log("accessor typeof " + typeof accessor);
console.log("The value is " + value);
let filtered = this.state.filtered;
console.log("the filtered items" + JSON.stringify(this.state.filtered));
let insertNewFilter = 1;

if (filtered.length) {
  console.log("filtered.length " + filtered.length);
  filtered.forEach((filter, i) => {
    if (filter["id"] === accessor) {
      if (value === "" || !value.length) filtered.splice(i, 1);
      else filter["value"] = value;

      insertNewFilter = 0;
    }
  });
}

if (insertNewFilter) {
  filtered.push({ id: accessor, value: value });
}

this.setState({ filtered: filtered });

console.log("this.state.filtered " + JSON.stringify(this.state.filtered));
  }

 uniqueOptions = (objectsArray, objectKey) => {
var a = objectsArray.map((o, i) => {
  return o[objectKey];
});

return a.filter(function(i, index) {
  return a.indexOf(i) >= index;
   });
  };

 handleFilter(item) {
console.log("Inside enter handleFilter");
console.log("console.log - > item.target.value " + item.target.value);
  }

  render() {
const { data } = this.state;
const a = this.state.filtered;

return (
  <div>
    <div className="applied-filter">
      {this.state.filtered.length > 0 && (
        <div className="applied-filter-text">Applied filters :</div>
      )}
      {a.map((obj, key) => {
        return (
          <div className="elliptical-applied-filter" key={key}>
            {obj.id}: {obj.value.join(",\u00A0")}
            {"\u00A0"}
            <div
              className="elliptical-applied-filter-cross"
              onClick={this.handleFilter}
            >
              <input
                type="image"
                id="cross-icon"
                src="https://image.flaticon.com/icons/png/128/126/126497.png"
                alt="close"
              />
            </div>
          </div>
        );
      })}
    </div>
    <br />
    <br />
    Select FirstName :{" "}
    <Select
      style={{ width: "50%", marginBottom: "20px" }}
      onChange={entry => {
        this.setState(
          {
            firstNameselect: entry
          },
          () => {
            console.log(
              "this.state.firstNameselect " +
                JSON.stringify(this.state.firstNameselect)
            );
          }
        );
        this.onFilteredChangeCustom(
          entry.map(o => {
            return o.value;
          }),
          "firstName"
        );
      }}
      value={this.state.firstNameselect}
      multi={true}
      options={this.uniqueOptions(this.state.data, "firstName").map(
        (name, i) => {
          return { id: i, value: name, label: name };
        }
      )}
    />
    Select LastName :{" "}
    <Select
      style={{ width: "50%", marginBottom: "20px" }}
      onChange={entry => {
        this.setState(
          {
            lastNameselect: entry
          },
          () => {
            console.log(
              "this.state.lastNameselect " +
                JSON.stringify(this.state.lastNameselect)
            );
          }
        );
        this.onFilteredChangeCustom(
          entry.map(o => {
            return o.value;
          }),
          "lastName"
        );
      }}
      value={this.state.lastNameselect}
      multi={true}
      options={this.uniqueOptions(this.state.data, "lastName").map(
        (name, i) => {
          return { id: i, value: name, label: name };
        }
      )}
    />
    <ReactTable
      data={data}
      filtered={this.state.filtered}
      onFilteredChange={(filtered, column, value) => {
        this.onFilteredChangeCustom(value, column.id || column.accessor);
      }}
      defaultFilterMethod={(filter, row, column) => {
        const id = filter.pivotId || filter.id;
        if (typeof filter.value === "object") {
          return row[id] !== undefined
            ? filter.value.indexOf(row[id]) > -1
            : true;
        } else {
          return row[id] !== undefined
            ? String(row[id]).indexOf(filter.value) > -1
            : true;
        }
      }}
      columns={[
        {
          Header: "Name",
          columns: [
            {
              Header: "First Name",
              accessor: "firstName"
            },
            {
              Header: "Last Name",
              id: "lastName",
              accessor: d => d.lastName
            }
          ]
        },
        {
          Header: "Info",
          columns: [
            {
              Header: "Age",
              accessor: "age"
            }
          ]
        }
      ]}
      defaultPageSize={10}
      className="-striped -highlight"
    />
    <br />
  </div>
);
  }
}

render(<App />, document.getElementById("root"));

请查看此演示以了解我想要实现的目标。

单击十字图标 lastName 椭圆 div 时 this.state.lastNameselect 应该是空白的，并且 this.state.filtered 中的相应子对象也应该被删除

同样，当单击十字图标 firstName 椭圆 div 时，this.state.firstNameselect 应该是空白的，并且 this.state.filtered 中的相应子对象也应该被删除。

我怎样才能实现这个功能？请帮忙。我需要一个通用的解决方案。现在我有 2 个下拉菜单，将来我会有更多。例如，如果我们单击姓氏的十字图标，则姓氏条目应设置为空白。名字应该保持原样。名字的点击图标也会发生同样的情况

标签： javascriptreactjs

javascript - 如何在单击交叉选项时从应用的过滤器中删除元素？- Reactjs/JavaScript

问题描述

解决方案

推荐阅读