reactjs - React - 如何过滤按钮

Question

我正在研究一些 React 教程，并试图找出如何通过搜索术语来从按钮组中过滤按钮。我的过滤器功能适用于文本，但我不知道如何让它与按钮一起使用。

<div className="searchbar">
  <form>
    <input type="text" placeholder="Search..." onChange={this.searchHandler} />
  </form>
  { 
    this.state.drinks.filter(searchingFor(this.state.term)).map(drink =>
      <div key={ drink.id } >
        { drink.title }
      </div>)
  }
</div>

我可以用这个（drink.title）过滤文本，但我想过滤下面部分中的按钮。这可能与我目前拥有的吗？抱歉，如果这是一个模糊的问题，我是 React 的新手，希望能提供任何帮助。

<Grid.Column className="left-col" width="3">  
  <Container >      
    <Menu >
      {drinks && drinks.length
        ? <Button.Group vertical widths={drinks.length} >
          {Object.keys(drinks).map((key) => {                 
            return <Button size="large" fluid active={drink && drink.id === drinks[key].id} key={key} onClick={()=>this.getDrink(drinks[key].id)}>
                      {drinks[key].title}
                   </Button>
                 })}
          </Button.Group>
        : <Container textAlign='center'>No drinks found. 
          </Container>
      }
    </Menu>
  </Container>
</Grid.Column>

和搜索功能

function searchingFor(term) {
  return function(x) {
    return x.title.toLowerCase().includes(term.toLowerCase()) || !term
  }
}

标签： reactjs