时间戳

首页 > 解决方案 > 使用 react 实现客户端过滤

reactjs - 使用 react 实现客户端过滤

问题描述

我已经构建了一个使用 React 添加和删除项目的小应用程序，我想在用户输入一些项目后在应用程序中实现搜索过滤器并仅显示用户搜索的那些项目，否则显示所有项目，

代码可以在这里找到

https://codesandbox.io/s/search-filter-uobil

标签： reactjs

解决方案

您可以使用正则表达式并过滤您想要的结果，如下所示：

    const filterItems = e => {
    let matchesFilter = new RegExp(e.target.value.trim(), 'i')
    const item = props.allOptions.filter(item => 
         matchesFilter.test(item)
      )
    console.log(item)
  }

见代码框

编辑：我已经更新了沙箱以反映您在评论中想要的内容。我正在使用钩子，但重要的是该函数将根据您在输入文本字段中设置的过滤器过滤传入的 allOptions。

推荐阅读