javascript - 如何使用分页最佳实践 reactjs 搜索过滤器？

Question

我有一个问题，如果在第 1 页和之后（除了 2）我搜索（类型）的内容，如果有数据它将显示我搜索（类型）的数据，见下图：

问题是如果在第 2 页上，我搜索的内容将出现在另一页上。即使在第 2 页上有数据，：

这是搜索前的第 2 页：

这是搜索前的第 1 页

如果我在第 2 页，则出现 abc 和 dcs 的数据。如果我搜索 dcs 然后 dcs 出现，或者如果我输入 d 它将出现 d 如果在其他页面上也有数据，它将显示

我使用这个codesanbox.io url： https://codesandbox.io/embed/condescending-pine-d7q3v

这是我的代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import dummyQnA from "./dummyQnA.json";
import "./styles.css";
import { Row, Col, Pagination, Button, Table, Divider } from "antd";
import Search from "antd/lib/input/Search";
import "antd/dist/antd.css";

const columns = [
  {
    title: "Question",
    dataIndex: "questionAndAnswer",
    key: "questionAndAnswer"
  }
];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      search: ""
    };
  }

  getHighlightedText(text, higlight) {
    if (!higlight.trim()) {
      return <span>{text}</span>;
    }
    let parts = text.split(new RegExp(`(${higlight})`, "gi"));
    return (
      <span>
        {parts
          .filter(part => part)
          .map((part, i) => (
            <mark
              key={i}
              style={
                part.toLowerCase() === higlight.toLowerCase()
                  ? { backgroundColor: "yellow" }
                  : {}
              }
            >
              {part}
            </mark>
          ))}
      </span>
    );
  }

  renderQnA = (qna, i) => {
    return {
      key: i,
      questionAndAnswer: [
        <Col key={i} md={24} style={{ marginTop: 20 }}>
          <Row>
            <Col md={23}>
              <b>
                {" "}
                {this.getHighlightedText(qna.questionAdmin, this.state.search)}
              </b>
              <p style={{ color: "#417505" }}>
                {" "}
                {this.getHighlightedText(qna.answerCustomer, this.state.search)}
              </p>
            </Col>
          </Row>
        </Col>
      ]
    };
  };

  onChange = e => {
    this.setState({ search: e.target.value });
  };

  render() {
    const { search } = this.state;
    const lowercasedFilter = search.toLowerCase();
    const filteredQnA = dummyQnA.filter(item => {
      return Object.keys(item).some(key =>
        item[key].toLowerCase().includes(lowercasedFilter)
      );
    });
    return (
      <div className="product-forum">
        <Row className="title-inline">
          <Col md={13} style={{ paddingTop: "6px" }}>
            <span className="title-inline__title">
              Pertanyaan terkait Produk ({dummyQnA.length})
            </span>
          </Col>
          <Col md={3}>
            <Button
              type="link"
              className="title-inline__button-live-chat"
              onClick={this.handleLiveChat}
            >
              LIVE CHAT
            </Button>
          </Col>
          <Col md={8}>
            <Search
              value={this.state.search}
              placeholder="Cari pertanyaan terkait"
              onChange={this.onChange}
            />
          </Col>
        </Row>
        <Table
          className="table-qna"
          showHeader={false}
          pagination={{ defaultPageSize: 5 }}
          dataSource={filteredQnA.map((QnA, i) => this.renderQnA(QnA, i))}
          columns={columns}
        />
        <Divider />
      </div>
    );
  }
}

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

标签： javascriptreactjssearch