代码之家 › 专栏 › 技术社区 › BartoszTermena

搜索过滤器输入

reactjs

BartoszTermena · 技术社区 · 6 年前

  state = {
   names: ['first', 'second']
  };

  updateSearch = (event) => {
   let updatedList = this.state.names;
    updatedList = updatedList.filter(name=> {
     return name.toLowerCase().search(
       event.target.value.toLowerCase()) !== -1;
     })
   this.setState({names: updatedList});
  }


 render() {
  const names = this.state.names.map((name) => { return (
    <div key={name}>
      <span>{name}</span>
    </div>
  )})
  return (
   <div>
    <input 
      placeholder="Search" 
      type="text" 
      onChange={this.updateSearch} />
        {names}
   </div>
    )
}

当我键入与名称一致的文本时, search 正在工作,仅显示该名称,但当我从 input 所有名称都应显示,但不会显示(仅显示以前搜索的名称)。为什么?

感谢您提前回复!

1 回复 | 直到 6 年前

ashish sherawat 6 年前

  Add one more val in state as initialName and in updateSearch set updateSearch value 
with initalNames.
Try This.
 state = {
   names: ['first', 'second'],
   intiailNames:['first','second']
 };

updateSearch = (event) => {
 let updatedList = this.state.intiailNames;
 updatedList = updatedList.filter(name=> {
 return name.toLowerCase().search(
   event.target.value.toLowerCase()) !== -1;
 })
this.setState({names: updatedList});
 }

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前