【问题标题】:How to make React search component如何制作 React 搜索组件
【发布时间】:2022-01-16 06:16:02
【问题描述】:

我正在做我的第一个电子商务 MERN 堆栈项目,但我不知道如何制作将接受搜索输入并返回匹配产品数组的搜索组件

【问题讨论】:

  • 嗨@Ali,欢迎加入堆栈。请花点时间阅读How to ask a question,然后考虑编辑您的问题以包含具体内容,以便我们尽力为您提供帮助。

标签: javascript node.js reactjs mongodb


【解决方案1】:

如果你想让它更快,你可以得到一个类似 Material UI 的图形库:https://mui.com/

像这样,您可以使用预先创建的组件,例如具有自动完成功能的组件:https://mui.com/components/autocomplete/#search-input

您不会详细说明您的案例,但要使用它,您必须配置一个路由,每次该输入发生变化时,该路由会返回一个已研究输入的列表(配置 onChange 函数每次有变化时请求列表的输入部分)。

【讨论】:

  • 我需要知道代码才能做到这一点
【解决方案2】:

添加搜索:

  1. 在应用中呈现您的搜索栏组件
  2. 添加您的 HTML 元素
  3. 添加帖子列表
  4. 根据您的搜索查询过滤列表
  5. 添加即时搜索或“键入时搜索”
  6. 使用 React Router 添加 SPA 导航
  7. “键入时搜索”、SPA 导航和可访问性问题
  8. 使用 React 测试库测试您的组件
  9. 结论

如果您想更准确地了解,可以在以下网址查看和了解相关资料。 https://www.emgoto.com/react-search-bar/

最好的问候。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-06
    • 2022-07-28
    • 2017-08-18
    • 1970-01-01
    • 2015-04-25
    相关资源
    最近更新 更多