Question

我是React的新手，我使用Semantic-ui-react。我试图使用Dropdown。

当我想从下拉列表中获取我的价值并调用我的函数时。我的事件得到了一些代理对象。

  handleTagChange(e) {
    console.log("handleTagChange");
    console.log(e);
  }

但是如果我在函数中添加了像test这样的东西，那么e.target.value就可以工作了，test就是代理对象。那是为什么？

  handleTagChange(test, e) {
    console.log("handleTagChange");
    console.log(test);
    console.log(e);
  }

Answer 1

semantic-ui-react组件实现的所有事件处理程序返回React Synthetic Event作为第一个参数（如vanilla React）和组件props +相关状态作为第二个参数。

使用您的示例：

handleTagChange(e, data) {
  console.log("handleTagChange");
  console.log(e); // React Synthetic Event
  console.log(data.name); // `name` prop
  console.log(data.value); // `value` that was just selected
}

正式确定此更改的问题：https://github.com/Semantic-Org/Semantic-UI-React/issues/623

通过此处的讨论解释其背后的理由：https://github.com/Semantic-Org/Semantic-UI-React/issues/638

event.target是一个浏览器事件属性。但是很多   语义UI组件（例如Dropdown，Checkbox和Radio）不会   直接使用本地浏览器表单控件，例如input和。{   select。它们使用程式化标记和自定义内部构建   状态。

因此，没有可用的本机浏览器事件   某些回调。这就是Semantic-UI-React中所有更改事件的原因   首先提供事件（如果可用），还提供第二个参数   其中包含您需要的数据。你永远不应该访问   大多数任务的本机浏览器事件。

React JS - 代理事件？

1 个答案: