React:隐藏/显示元素,同时隐藏其余类似元素

时间:2017-04-19 13:55:08

标签: reactjs

我有一个食谱创建者,可以创建食谱并列出其成分。我希望它只显示食谱名称,并将其分类,但是当你点击它时,它会显示成分部分。如果任何其他部分打开,我希望它也关闭它们。

我已尝试过与州有关的几个解决方案,但尚未找到可靠的解决方案。我可以用jQuery做到这一点,但我听说使用React和jQuery并不是一个好习惯,所以我宁愿正确地做。

这是完整的应用:https://github.com/jeffm64/recipe-box2/tree/master/src/components

配方框通过主应用程序渲染功能中的.map呈现,如下所示:

{Recipes.map(function(item, key) {
                    return <RecipeBox recipe={Recipes} name={item.name} ingredients={item.ingredients} order={item.order} key={key} generalUpdate={genUpdate}  />;
})}

1 个答案:

答案 0 :(得分:2)

只展示一种成分的成分会更容易。关闭其余部分将会有点棘手。

揭示成分 - 如果没有Redux,您可以添加州属性isOpen。当您单击该组件中的按钮时,它应将状态属性isOpen更改为true。隐藏/显示基于该属性值的成分,您可以在标记(如下所示)或类和CSS规则中执行此操作。

<div key={1}>
  showIngredients = () => { this.setState({isOpen: true}) }
  <button onClick={this.showIngredients}>Show ingredients</button>
  {this.state.isOpen && <div>Ingredients list</div>}
</div>

隐藏其他成分 - 这有点棘手,需要不同类型的解决方案。您需要在父组件中定义一个方法,以设置所有子组件的状态。请注意上面组件中的key。如果每个子项都有唯一键,并且父项定义了selectedKey的状态属性,则可以执行以下操作:

// parent
revealChild = (key) => {this.setState(selectedKey: key)}
...
<div>
  {children.map((child) => {
    return <Child onReveal={this.revealChild} key={child.key} isSelected={this.state.selectedKey == child.key}/>
  })}
</div>

// child
handleReveal = () => this.props.onReveal(this.props.key)
showIngredientsClass = () => this.props.isSelected ? 'visible' : 'hidden'
showButtonClass = () => this.props.isSelected ? 'hidden' : 'visible'
...
<button onClick={handleReveal} className={this.showButtonClass()}>Show ingredients</button>
<div className={this.showIngredientsClass()}>
  My ingredients
</div>