我知道这个主题已经问了很多问题,但确实感觉每个问题都不相同,我找不到一个与我的问题非常接近的问题。
我有一个带有可拖动ItemComponent
的网格。选择后,将显示其他操作图标(ItemActionIcon
)。一旦单击其中一个动作,我非常想取消选择组件(并有效隐藏动作图标)。
,因此在第77行<div onClick={() => this.setState({selected: false})} key={index}>
中,我试图将selected
的状态更新为false。在文件中提到的所有其他情况下,它已经可以正常工作。但在这种情况下不是。当我单击该图标时,我可以通过调试器(或在尝试时通过console.log看到)看到onClick
操作已按预期触发,ItemComponent
甚至再次调用了{ {1}}方法,但render
仍设置为this.state.selected
。
true
那是怎么回事?
答案 0 :(得分:1)
组件的外部<div>
具有自己的onClick
处理程序,该处理程序将状态值设置回false
。尝试在内部stopPropagation()
处理的事件上使用onClick
。这样可以防止事件传播到外部父节点<div>
,并且在单击时仅执行内部onClick
处理程序。
{
!this.state.selected || !this.actions.length ? null : (
<div
style={{
position: "absolute",
bottom: "0"
}}
>
{this.actions.map((action, index) => (
<div
onClick={e => {
e.stopPropagation();
this.setState({ selected: false });
}}
key={index}
>
<ItemActionIcon {...action} />
</div>
))}
</div>
);
}