javascript - BlueprintJS/React - 通过 onClick 检索 TagInput > 标签值时遇到问题

Question

在 React/BlueprintJS 应用程序中，我有一个 TagInput。我需要在单击时访问任何标签的字符串值。为了简单起见，我们假设我只需要 console.log(value)。

我似乎无法在回调中找到标签的值。基于the documentation ，我相信我需要在 tagProps 中传递 onClick 函数。但是，我尝试过的任何方法似乎都无法返回字符串值。

我在这里创建了一个基本示例，单击任何标签后在控制台中查看错误:

https://codesandbox.io/s/blueprint-sandbox-7jsb3?fontsize=14

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

我非常感谢您朝正确的方向插入，非常感谢。

Answer 1

我认为警告本身是不言自明的。

React 有一个合成事件池，这意味着它将事件分配给处理程序，并在处理程序调用后将该事件释放回池中。

const handleTagClick = x => console.log(x);

在上面的代码中，x只不过是合成事件，在您的TagInput显示在屏幕。

因此，当您尝试单击时，您会收到警告。消除此警告的简单方法是打印 currentTarget。

const handleTagClick = x => console.log(x.currentTarget.innerText);

上面的代码将打印被点击的确切目标。

另一种方法是使用event.persist(),

const handleTagClick = x => {
  x.persist();
  console.log(x.currentTarget.innerText);
}

但我认为在你的情况下它会非常慢，所以不要使用它。

了解更多关于synthetic event的信息.

Demo