Question

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

我使用两列创建了过滤器。现在，我选择的任何过滤器都会显示在页面的顶部。现在，我可以通过取消下拉列表来删除过滤器。但我也想从显示过滤器的顶部区域中删除过滤器。如您所见，应用的filter top 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"));

请检查此Demo以查看我要达到的目标。

单击十字形图标lastName elliptical div时，this.state.lastNameselect应为空白，并且this.state.filtered中的相应子对象也应删除

类似地，当单击十字图标firstName椭圆div时，this.state.firstNameselect应为空白，并且应从this.state.filtered中删除相应的子对象。

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

Answer 1

您需要添加handleFilter更改语句，因为您已经具有所有值，您可以将其传递给事件并使用它进行过滤，我试图使它对于名和姓都通用。这将从状态中删除条目，并以删除的条目作为响应。

检查此

  handleFilter(item) {
    var itemName =
      item.id === "firstName" ? "firstNameselect" : "lastNameselect";
    console.log(item);
    this.setState({
      ...this.state,
      [itemName]: this.state.firstNameselect.filter(
        a => item.value.indexOf(a.value) < 0
      ),
      filtered: this.state.filtered.filter(a => {
        if (item.id === a.id) {
          return false;
        }
        return true;
      })
    });
  }

Demo

Answer 2

我们可以做这样的事情：

这是在removeFilter函数中完成的步骤：

我正在传递用户在其中单击关闭图标和firstNameselect
中字段名称（secondNameselect或removeFilter）的数组。 li>
然后，我在filtered的{{1}}数组中找到传递数组的索引，并通过this.state方法使用该索引删除该数组。
然后我使用splice

firstNameselect

secondNameselect

[array]: []

这是现场demo

希望它会有所帮助：）

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

2 个答案: