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
  }
}

反应-如何过滤按钮

0 个答案: