reactjs – React JS – 代理事件？

2024年1月25日 238次阅读

我是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);
  }

最佳答案 语义ui-react组件实现的所有事件处理程序返回React Synthetic Event作为第一个参数(如vanilla React),组件将相关状态作为第二个参数.

使用你的例子：

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.

点赞