I'm new in React and I'm using Semantic-ui-react. I'm trying to use the Dropdown.
When I want to get my value from the dropdown and call my function. My event get some proxy object.
handleTagChange(e) {
console.log("handleTagChange");
console.log(e);
}
But if I add something else like test in the function, the e.target.value works and test is the proxy object. Why is that?
handleTagChange(test, e) {
console.log("handleTagChange");
console.log(test);
console.log(e);
}
All event handlers that semantic-ui-react components implement return the React Synthetic Event as the first argument (as vanilla React would) and component props + relevant state as the second argument.
Using your example:
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
}
Issue formalizing this change: https://github.com/Semantic-Org/Semantic-UI-React/issues/623
Explanation of the rationale behind this from the discussion here: https://github.com/Semantic-Org/Semantic-UI-React/issues/638
The
event.targetis 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 asinputandselect. 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.