在激活Dom事件之前更新了React组件（onBlur和onClick）

Question

我有一个反应数据主义组件（输入字段和选项列表）和我正在听的两个Dom事件。

1. 输入字段的onBlur
2. 点击列表项

问题是，onBlur事件隐藏了列表项。

当我点击某个项目时，首先触发onBlur事件并更新要隐藏的列表项目。显然，随着列表项的更新，它们的onClick事件永远不会被触发。

现在我在500毫秒超时中包装onBlur事件，但这看起来很hacky并且不是一个很好的用户体验。

这个问题有一个共同的解决方案吗？

以下是代码示例：Link to Codepen

class DatalistOption extends React.Component {
  handleClick = (evt) => {
    console.log("onClick for Option called")
    this.props.select(evt);
  }

  ...
}


class ReactDatalist extends React.Component {
  ...
  handleInputBlur = () => {
    console.log("onBlur called")
    //setTimeout(() => this.setState({ hide: true }), 500); // such a hack, that I am ashamed...
    this.setState({ hide: true })
  }
}