BlueprintJS / React - 无法通过 onClick 检索 TagInput > Tag 值

Question

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

我似乎无法在回调中找到标签的值。基于 the documentation，我认为我需要在 tagProps 中传递一个 onClick 函数。但是，我尝试过的似乎都没有 return 字符串值。

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

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 只不过是 synthetic event，它会在您的 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

BlueprintJS / React - 无法通过 onClick 检索 TagInput > Tag 值

BlueprintJS / React - trouble retrieving TagInput > Tag value via onClick

javascript

reactjs

blueprintjs