Реализация фильтра глобального поиска по таблице реакций: Реакт + таблица реакций - PullRequest
Новая
       33

Реализация фильтра глобального поиска по таблице реакций: Реакт + таблица реакций

0 голосов
/ 01 июля 2019

Я пытаюсь реализовать глобальный фильтр поиска, который ищет ключ по всей таблице.Я присоединяю обработчик изменений, и на каждом входе я запускаю обратный вызов, который ищет этот ключ по этим данным, и значение устанавливается. Он фильтруется, когда я набираю символы, но когда я удаляю символы один за другим,фильтр не похоже на работу.Куда я иду не так?Буду признателен за помощь

Код Песочница: https://codesandbox.io/s/jolly-bhabha-iqcx1

Код 

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "semantic-ui-react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { firstName: "aaaaa", status: "Pending", visits: 155 },
        { firstName: "aabFaa", status: "Pending", visits: 155 },
        { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
        { firstName: "aAaaaa", status: "Approved", visits: 175 },
        { firstName: "adaSaaa", status: "Cancelled", visits: 165 },
        { firstName: "aasaaa", status: "Cancelled", visits: 157 },
        { firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
        { firstName: "aaaaaa", status: "Submitted", visits: 155 }
      ],
      columns: [],
      searchInput: ""
    };
  }

  componentDidMount() {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName",
        sortable: false,
        show: true,
        displayValue: " First Name"
      },
      {
        Header: "Status",
        accessor: "status",
        sortable: false,
        show: true,
        displayValue: "Status "
      },
      {
        Header: "Visits",
        accessor: "visits",
        sortable: false,
        show: true,
        displayValue: " Visits "
      }
    ];
    this.setState({ columns });
  }

  handleChange = event => {
    this.setState({ searchInput: event.target.value }, () => {
      this.globalSearch();
    });
  };

  globalSearch = () => {
    let { data, searchInput } = this.state;
    if (searchInput) {
      let filteredData = data.filter(value => {
        return (
          value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
          value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
          value.visits
            .toString()
            .toLowerCase()
            .includes(searchInput.toLowerCase())
        );
      });
      this.setState({ data: filteredData });
    }
  };

  render() {
    let { data, columns, searchInput } = this.state;
    return (
      <div>
        <br />
        <Input
          size="large"
          name="searchInput"
          value={searchInput || ""}
          onChange={this.handleChange}
          label="Search"
        />
        <br />
        <br />
        <ReactTable
          data={data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1 Ответ

3 голосов
/ 01 июля 2019

Это не проблема с реактивной таблицей.В текущей реализации

  1. в первый раз вы фильтруете исходные данные.

  2. Второй раз, когда вы пытаетесь фильтровать, вы пытаетесь отфильтровать результаты из ранее отфильтрованных данных (текущие данные в объекте состояния отфильтрованы результаты предыдущей попытки).

Я предлагаю попробовать (это раздвоено у вас): https://codesandbox.io/s/eloquent-clarke-w1ehv

Сохраните ваши исходные данные в качестве неизменного источника и отфильтровывайте их каждый раз при изменении входных данных для поиска, а нефильтрация от текущего объекта данных в состоянии.Посмотрите на вилку, которую я прикрепил.

Если ваши данные поступают из ajax-вызова, вам, вероятно, следует поддерживать две переменные состояния: 

this.state = {
   data: [],
   filteredData: [],
   columns: [],
   searchInput: ""
};

componentDidMount() {
  yourapicall.then(data => {
    this.setState({
      data // whatever data you get.
    });
  });
}

// And in your global search

globalSearch = () => {
    let { searchInput, data } = this.state;
    let filteredData = data.filter(value => {
    return (
        value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.visits
          .toString()
          .toLowerCase()
          .includes(searchInput.toLowerCase())
      );
    });
    this.setState({ filteredData });
};

И условно отобразить вашу таблицу реакции

<ReactTable
   data={filteredData && filteredData.length ? filteredData : data}
   columns={columns}
   defaultPageSize={10}
   className="-striped -highlight"
/>

Надеюсь, это полезно!

...