我有一个食谱创建者,可以创建食谱并列出其成分。我希望它只显示食谱名称,并将其分类,但是当你点击它时,它会显示成分部分。如果任何其他部分打开,我希望它也关闭它们。
我已尝试过与州有关的几个解决方案,但尚未找到可靠的解决方案。我可以用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} />;
})}
答案 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>