React: Don't use keyUp for onChange events

javascript events reactjs keyup
Kyle Hotchkiss picture Kyle Hotchkiss · Jun 2, 2014 · Viewed 11.5k times · Source

Is it possible to have React fire the onChange event after the focus on an element is lost as opposed to having it on keyUp (currently, onChange is an abstraction of any event that manipulates the field value)? keyUp is a little slow for me, and I think it may help the mobile expereince with what I'm building to switch the firing of that to after the field is focused.

Answer

captray picture captray · Jun 11, 2014

Are you looking for something like this?

JS Fiddle

I may be interpreting what you're asking for incorrectly, but you should be able to get your values via e.target.value or through using a ref, like:

<input type="text" ref="myValue" onBlur={this.handleChange} />

and then in your handleChange function you'd have something like this:

handleChange: function()
{
    var theValue = this.refs.myValue.getDOMNode().value;
    //setState, etc. here
}

Related questions

React onClick - pass event with parameter

Without Parameter function clickMe(e){ //e is the event } <button onClick={this.clickMe}></button> With Parameter function clickMe(parameter){ //how to get the "e" ? } <button onClick={() => this.clickMe(someparameter)}></button> I …

Read More
React JS toggle/ adding a class on hover

I'm using the animate.css library with React and trying to set up a element (button) to pulse when hovered over. Tried to look through the docs and here but can't find a way to achieve this simple task. If …

Read More
React event onMouseLeave not triggered when moving cursor fast

Im trying to implement hover event but onMouseLeave is not always triggering when leaving element especially when moving cursor over elements fast. I tried i Chrome, Firefox and Internet Explorer but in every browser same problem appeared. My code: import …

Read More