时间戳

首页 > 解决方案 > 通过 OnClick 功能过滤帖子

javascript - 通过 OnClick 功能过滤帖子

问题描述

如果单击按钮，我正在尝试根据其类别过滤一些帖子。例如，我有一个按钮，当单击该按钮时，显示的唯一帖子与软件项目相关。

我已经设置了一个名为 searchHandler 的函数，该函数已传递给我的 SidebarOptions 组件，该组件具有 onclick 事件。但是当我通过它时，什么也没有发生。

以下是 searchHandler 所在的（父）Home 组件中的代码：

function Home() {
  const [posts, setPosts] = useState([]);
  const [filteredPosts, setFilteredPosts] = useState(null);

  const searchHandler = (event) => {
    const { value } = event.target;
    setFilteredPosts(
      value
        ? posts.filter(
            (post) =>
              post.question.question.includes(value)
          )
        : null
    );
  };

  useEffect(() => {
    db.collection("questions")
      .orderBy("timestamp", "desc")
      .onSnapshot((snapshot) =>
        setPosts(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            question: doc.data(),
          }))
        )
      );
  }, []);

  return (
    <div className="home">
      <div></div>
      <Header searchHandler={searchHandler} />
      <div className="home__content">
        <Sidebar searchHandler={searchHandler} />
        <Feed posts={filteredPosts || posts} />
        <Widget />
      </div>
    </div>
  );
}

这是接收它的（子）侧边栏组件：

import React from "react";
import "../Style/Sidebar.css";
import SidebarOptions from "./SidebarOptions";

function Sidebar({ searchHandler }) {
  return (
    <div className="sidebar">
      <SidebarOptions searchHandler={searchHandler} />
    </div>
  );
}

export default Sidebar;

这是函数最终发送到的（孙子）SidebarOptions：

function SidebarOptions({ searchHandler }) {

  return (
    <div className="sidebarOptions">
      <div className="sidebarOption" onChange={() => searchHandler}>
        <img
          src="https://c.pxhere.com/photos/7b/1a/code_coding_computer_developer_developing_development_macbook_notebook-913320.jpg!d"
          srcset="https://c.pxhere.com/photos/7b/1a/code_coding_computer_developer_developing_development_macbook_notebook-913320.jpg!d"
          alt="Software Projects"
        />
        <p>Software Projects</p>
      </div>
 );
};

标签： javascriptreactjsgoogle-cloud-firestorefrontend

解决方案

我认为你需要重新审视你的SideBarOptions组件。我想知道onChange处理程序在div. 如果您希望用户键入，我认为应该是input而不是。div此外，您需要使用键入的值调用您的处理程序，这里您没有调用处理程序（请注意代码中缺少()after ）。此外，最好添加类似 a 的内容，以便不会为用户键入的每个字符触发过滤器。理想情况下，一旦用户停止输入，它就应该被触发，就是这样。searchHandlerSideBarOptionsdebouncedebounce

根据我对它可能如何工作的猜测，在下面放置一些代码片段。

const SideBarOptions = ({ searchHandler }) => {
  const [filterText, setFilterText] = useState("");
  
  const handleFilter = () => {
    searchHandler(filterText);
  }

  return (
    <div className="sidebarOptions">
      <input name="filterText" value={filterText} onChange={(e) => setFilterText(e.target.value)} />
      <div className="sidebarOption" onChange={() => searchHandler}>
        <img src="https://c.pxhere.com/photos/7b/1a/code_coding_computer_developer_developing_development_macbook_notebook-913320.jpg!d" srcset="https://c.pxhere.com/photos/7b/1a/code_coding_computer_developer_developing_development_macbook_notebook-913320.jpg!d"
          alt="Software Projects"
        />
        <p>Software Projects</p>
        <button onClick={handleFilter}>Filter</button>
      </div>
    </div>
  );
}

推荐阅读