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.
Related
Is there a native MUI event for when the pre-selection value changes in a MUI:Select component?
For example, here is my MUI:Select component with 3 options:
I would like an event for when 'Public', 'Restricted' or 'Private' is pre-selected (but not actually selected; i.e. before the onChange() event), either with a mouse-over event or a keyboard up/down event. This is because I have a tooltip card that needs to change dynamically for the user as they interact with the options.
Using this example https://codesandbox.io/s/3iv96 as a guide, I implemented a bespoke solution by capturing the mouse-over event and extracting the text value. I just realized I have forgotten to handle key up/down.
So the question becomes whether I have just missed the obvious, or do I need to roll my own component by wrapping MUI:Select and publishing the events I need.
Looks like out of the box this isn't supported.
Looking at this thread https://github.com/JedWatson/react-select/issues/745 it has to be done manually.
I want to perform an action each time a blur event happens on a form group bound control in angular.
I've seen the onBlur validation and it is an option. But I don't want to restrict the form control update events to be blurs. People may leave the cursor in the input and submit the form with a key control.
Something like an event observable where I would get a stream of the events the form group is using to perform its internal controls. Filter on the type (if 'blur') and call my function would be ideal.
Is there anything like this?
Also I don't want to use blur bindings from the DOM elements directly in the template. It would be so much extra work to make and maintain.
Basically in vanilla JavaScript you can register event-listeners to that target element via addEventListener():
var formInputElement = document.getElementById("myForm");
formInputElement.addEventListener("focus", myFocusFunction);
formInputElement.addEventListener("blur", myBlurFunction):
formInputElement.addEventListener("focusin", myFocusFunction);
formInputElement.addEventListener("focusout", myBlurFunction);
These will call your functions passed in as listener (callback function) for the event-type (e.g. myBlurFunction for an event-type identified by blur).
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
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.