过滤数据-React JS（搜索栏）

debugcn 发表于 Dev

托尔·克里斯滕森

我制作了一个小项目进行练习，将一张书的清单提取到一个表中，我希望能够根据标题在该表中搜索书。

我认为我必须使用过滤器方法，但是我不确定如何以及在何处使用它。

我的数据被提取到这样的表中：

const [dataFromServer, setDataFromServer] = useState([]);
  const [q, setQ] = useState("")

  useEffect(() => {
    apiFacade.getBooks().then((data) => setDataFromServer(data.all));
  }, []);

  return (
    <div className="container-fluid padding">
      <div className="row">
        <div className="col-3"></div>
        <div className="col-6 text-center">
          <h2 className="text-center mt-5 mb-2">Books</h2>
          <p className="text-muted">Search for a book by title</p>

          <div class="input-group rounded mb-5 mt-2">
            <input
              type="search"
              class="form-control rounded"
              placeholder="Search"
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
            <button type="button" class="btn btn-primary">
              <FaSistrix />
            </button>

          </div>
          <table className="table">
            <thead>
              <tr>
                <th scope="col">ISBN</th>
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">Publisher</th>
                <th scope="col">Publish year</th>
              </tr>
            </thead>
            <tbody>
              {dataFromServer && dataFromServer.length > 0 ? (
                dataFromServer.map((m) => (
                  <tr key={m.isbn}>
                    <td>{m.isbn}</td>
                    <td>{m.title}</td>
                    <td>{m.author}</td>
                    <td>{m.publisher}</td>
                    <td>{m.publishYear}</td>
                  </tr>
                ))
              ) : (
                <Spinner animation="border" />
              )}
            </tbody>
          </table>
          <div className="col-3"></div>
        </div>
      </div>
    </div>

我将搜索栏中的输入输入到名为Q（错误的命名）的状态

但是，如何过滤数据？我对此非常了解，如果您有答案，请解释如何以及为什么，这样我才能真正学到一些东西。

Samehanwar

遵循这些步骤。

为过滤后的数据添加新状态，并保持原始数据完整以回退到该状态。
呈现过滤的数据。

实现从源数据过滤数据的功能。

const [dataFromServer, setDataFromServer] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [q, setQ] = useState("");

useEffect(() => {
  apiFacade.getBooks().then((data) => {
     setDataFromServer(data.all);
     setFilteredData(data.all);
  })
}, []);

const filtered = (e) => {
  const filtered =
    dataFromServer &&
    dataFromServer.filter((item) => {
      return item.title.toLowerCase().startsWith(e.toLowerCase());
    });
  setFilteredData(filtered);
};

return (
  <div className="container-fluid padding">
    <div className="row">
      <div className="col-3"></div>
      <div className="col-6 text-center">
        <h2 className="text-center mt-5 mb-2">Books</h2>
        <p className="text-muted">Search for a book by title</p>

        <div class="input-group rounded mb-5 mt-2">
          <input
            type="search"
            className="form-control rounded"
            placeholder="Search"
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              filtered(e.target.value);
            }}
          />
          <button type="button" class="btn btn-primary">
            {/* <FaSistrix /> */}
          </button>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th scope="col">ISBN</th>
              <th scope="col">Title</th>
              <th scope="col">Author</th>
              <th scope="col">Publisher</th>
              <th scope="col">Publish year</th>
            </tr>
          </thead>
          <tbody>
            {filteredData && filteredData.length > 0
              ? filteredData.map((m) => (
                  <tr key={m.id}>
                    <td>{m.title}</td>
                  </tr>
                ))
              : null}
          </tbody>
        </table>
        <div className="col-3"></div>
      </div>
    </div>
  </div>
);

尝试类似的工作演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。