Because we add onClick handlers directly to components... eg:
<button onClick={dosomething}>Click</button>
Is there an efficient way to do this (not adding an onClick to every element) when we're dealing with dozens of elements ?
For example, in my backbone apps I would just apply a handler to a class:
events:
'click .someclass': 'doSomething'
The backbone way seems much cleaner and easier to manage. Is there a way to emulate this behavior with React Components?
To add some perspective, I have say a dozen or more form elements that when any of them are changed, I want to potentially runs some logic. They could be text boxes, radio buttons, etc.
This optimization is not needed. It would if you were coding in other libraries like jQuery, but React does this automatically for you.
I quote:
Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see David Walsh's excellent blog post.
Seen here: https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
You can apply the event handler to a common parent element instead and handle the event there:
<form onChange={this.handleChange}>
{/* ...form elements... */}
</form>
...where the event handler determines what to do based on the event object's .target:
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
As a live example, I have an <AutoForm> component which uses this technique to render a <form> which handles extracting data from changed fields and the submitted form for you.
Related
I was learning React and wanted to deeply understand how handling events with event handlers work behind the scenes. Later, I came across this article https://hub.packtpub.com/how-to-perform-event-handling-in-react-tutorial/ explaining how event handling works behind the scenes. This article says that "When you assign an event handler function to an element in JSX, React doesn’t actually attach an event listener to the underlying DOM element. Instead, it adds the function to an internal mapping of functions. There’s a single event listener on the document for the page. As events bubble up through the DOM tree to the document, the React handler checks to see whether any components have matching handlers". By "it adds the function to an internal mapping of functions" does it mean that each component has its own internal mapping of functions? or does it mean that React takes all event handlers in an app overall and put all of those handlers in its internal mapping of functions?
Please guys help anyone. Please let me know if you are confused
I have an event component and a container class that lists the events. I am struggling with deciding between these two options
Have the container class get the list of event_id, pass the event_id to each event component, and have each event component fetch its own data.
Have the container class get the list of events objects, and pass the event object in as a prop to the event component.
The user can edit events, so the event components needs to be able to handle updates.
With option 1, I will only need to make one fetch to the rest api, but then the container class has to manage the state of each event in case of edits.
With option 2, I will have to make a fetch request for each event, but then each event object can manage its own state.
Which option (or any suggested 3rd options) should I implement?
I'm with the first choice ...
It's better always to reduce your requests.
And in react it's better to make your design such as .. less containers .. more components
I mean that if you can manage all your components in one container this would be a better solution
Another Case .. Maybe you'd have to transfer state or to make interactive between event components .. this would be much harder if you make every component fetch data by itself
So I'm with the first choose
Update:
Will it be displayed with the same event handler ? If yes .. than the other choice will be better
what I mean that: some time you have component with event handler .. but this event will be handled differently in each parent component(like when you have custom button components with some styles .. but one-click event will be handled differently depending on parent component) .. so the first choice will be better
but if it's handling same event in the same way each time then the second choice will be better
Both the approaches are correct, and nothing wrong to go over another.
It all depends on how your UI wants to show these events. If data from multiple components (event component and a container class in this case) needs to be in sync, then move state data to closest parent component of the components that need it and handle updates through callback functions. If not, move individual event operation in child(event component in this case) component
I know this is the proper way to do -
Attach handlers on react components using attributes such as onClick, onBlur etc.
If attaching custom events then attach them in componentDidMount so that it always gets attached on every rendering.
https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation
However, what happens when an event is attached to a DOM element using jquery ? Why am I not able to listen to those events ? I am attaching them out side componentDidMount. However the event handler should get trigerred the first time atleast ?
I was debugging some react code which was attaching an handler to it directly, but it was not trigerring the handler at all. Why was that ?
Without code example it's difficult to know for sure but more than likely you're trying to bind an event using jQuery to some react-generate DOM element. So depending where you do the bind, you're probably using a jQuery selector which returns no results because React hasn't rendered that element to the DOM at the time the selector is being run.
This is why, if you are going to use jQuery binding, you should make sure you do so as part of the component lifecycle that ensures the element is actually rendered to the DOM before you are trying to select it with jQuery. So that's why the recommendation is to put this kind of code inside componentDidMount and clean it up in componentWillUnmount.
I'm using react with a map library, I use react to render elements in a container which provided by the map library.
The problem is that the container prevent event bubbling, I checkout reactjs source code found the event emitter listen on html document and depend on event bubbling to dispatch event.
How can I make the onClick handler to work? I currently addEventListener manually but don't think it a elegant way.
<body>
<container preventBubbling>
<ReactElement onClick={this.handleClick}/>
</container>
</body>
As you said, React depends on event bubbling instead of attaching event handlers directly to any DOM node you want events for. This is an integral part of React, and not something you can avoid without manually attaching event handlers in componentDidMount. And also manually removing them in componentWillUnmount.
What's the reason for cancelling bubbling in the map library? I'd try to remove that cancellation and see if it works.
For debugging purposes I want to track all events for a certain component (combo, form, etc.) so I could see when and what events have fired for this component.
Is there a common approach to tracking all events without creating specific listeners?
You can use Ext.util.Observable for this purpose. Let's say the reference is myCombo:
Ext.util.Observable.capture(myCombo, function(){console.log(arguments)});
I use this one-liner quite often from the console to see the fired events.