Menu
I've got a form, in which I want to handle change event on text inputs, but React onChange triggering on key down (opposite to native JS, that triggers change event when an input field is out of focus).
Is there a React way to do what I want?
855
To handle focus out in React, we use 'onFocusOut'. It is passed as an attribute in <input> elements, and can be used to perform actions when the cursor leaves the input box. React's onFocusOut event is related to the keyboard focus.
it is because you are rendering the form in a function inside render(). Every time your state/prop change, the function returns a new form. it caused you to lose focus.
Full example import React, { MouseEvent } from 'react'; const ButtonComponent = () => { const handleMouseEvent = (e: MouseEvent<HTMLButtonElement>) => { e. preventDefault(); // Do something }; return <button onMouseOut={handleMouseEvent}>Click me!
If you want to only trigger validation when the input looses focus you can use onBlur.
React uses onFocus and onBlur instead of onFocusIn and onFocusOut. All React events are normalized to bubble, so onFocusIn and onFocusOut are not needed/supported by React. 2
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
