假设我有一个包含两个项目的数组，我想创建一个单击事件，该事件将显示我单击的特定索引的一些内容
例如 ：
let array = [
{name:test},
{name:test2}
]
this.array.map((item,index)=>{
return(
<div>
{item.name}
<button onClick={()=>this.showContentFunction()} >show content</button>
{this.renderContent()}
</div>
)
})
现在它将显示两个项目我想单击第一个项目按钮并仅在同一项目索引下显示隐藏内容而不是所有项目
我怎样才能做到这一点
多谢 ！
<button onClick={() => this.showContent(index)}>Show Content</button>
这是一般的想法。您需要将项目的索引传递给您的点击处理程序。在你的点击处理程序中，你可以做一些事情来编辑数组中的项目，将一个showContent布尔值设置为它们的属性之一，然后像这样使用它......
this.array.map((item, index) => {
return (
<div>
{item.name}
<button onClick={() => this.showContent(index)}>Show Content</button>
{item.showContent &&
this.renderContent()
}
</div>
);
})
...或者您可以维护从项目 ID 到内容可见性的映射，并在渲染时引用它：
constructor(props) {
super(props);
this.state = {
isItemContentVisible: {}
};
}
showContent(id) {
// merge new value with existing visibility status into new object
this.setState({
isItemContentVisible: {
...this.state.isItemContentVisible,
[id]: true
}
});
}
// ...and when you're rendering the list...
this.array.map((item, index) => {
return (
<div>
{item.name}
<button onClick={() => this.showContent(item.id)}>Show Content</button>
{this.state.isItemContentVisible[item.id] &&
this.renderContent()
}
</div>
);
})