反应状态未更新

时间:2020-05-19 18:31:56

标签: reactjs typescript next

我知道这个主题已经问了很多问题,但确实感觉每个问题都不相同,我找不到一个与我的问题非常接近的问题。

我有一个带有可拖动ItemComponent的网格。选择后,将显示其他操作图标(ItemActionIcon)。一旦单击其中一个动作,我非常想取消选择组件(并有效隐藏动作图标)。

enter image description here

,因此在第77行<div onClick={() => this.setState({selected: false})} key={index}>中,我试图将selected的状态更新为false。在文件中提到的所有其他情况下,它已经可以正常工作。但在这种情况下不是。当我单击该图标时,我可以通过调试器(或在尝试时通过console.log看到)看到onClick操作已按预期触发,ItemComponent甚至再次调用了{ {1}}方法,但render仍设置为this.state.selected

true

那是怎么回事?

1 个答案:

答案 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>
  );
}