reactjs - React JS - 代理事件？

Question

我是 React 新手，我正在使用 Semantic-ui-react。我正在尝试使用下拉菜单。

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

  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 作为第一个参数(如普通 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

The event.target is a browser event property. However, many Semantic UI components, such as a Dropdown, Checkbox, and Radio do not work directly with native browser form controls such as input and select. They are built using stylized markup and custom internal state.

Because of this, there are no native browser events available for certain callbacks. This is why all change events in Semantic-UI-React provide the event first (when available) but also a second argument which contains the data you need. You should never have to access the native browser event for most tasks.