在 .map onClick() 中渲染组件 - React
2018-04-20
773
我尝试在 onClick 中渲染组件,我遇到的问题是,我的 onClick 会在每一行中打开组件,而不仅仅是在我单击的按钮中打开。 这可能是索引问题。你能看看我的代码吗?谢谢!
class ItemView extends Component {
constructor(props) {
super(props);
this.state = {
isFormOpen: false,
parentId: null,
}
}
handleAddItem = (value) => {
this.setState({
parentId: value.parentId,
isFormOpen: !this.state.isFormOpen,
})
}
render() {
return (
<div className="ui relaxed divided list">
{data.items.map((item, index) => {
return (
<div className="item" key={index}>
<Button
label={'Add Item'}
onClick={() => this.handleAddItem({ parentId: item.parentId })}
/>
{isFormOpen && (
<AddItem parentId={parentId} />
)}
</div>
)
})}
</div>
)
}
}
2个回答
添加检查
parentId
是否等于
item.parentId
:
{isFormOpen && parentId === item.parentId && (
<AddItem parentId={parentId} />
)}
Igor Alemasow
2018-04-20
你说得对。
为此,你必须使用其他组件。在这个组件中,因为你使用
map
来呈现元素,所以它会在每次或每行中呈现它。
这就是为什么
isFormOpen
为
true
时,它在所有项目/行上都为真。
请使用其他组件来呈现条件元素。
M Shafique
2018-04-20