Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React: Don't use keyUp for onChange events

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.

like image 323
Kyle Hotchkiss Avatar asked Feb 12 '23 20:02

Kyle Hotchkiss


2 Answers

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
}
like image 128
captray Avatar answered Feb 15 '23 09:02

captray


You could build your own component that support this behavior, for example:

var ChangeOnBlurInput = React.createClass({
  render: function() {
    var options = this.props;
    options.onBlur = options.onChange;
    // You can also use `transferPropsTo` here, but I've heard it's deprecated
    return React.DOM.input.call(React.DOM, options);
  }
});

React.renderComponent(
  ChangeOnBlurInput({
    value: "Nice", 
    onChange: function(e) { alert(e.target.value) } }),
 document.body);

And use it instead of React.DOM.input wherever you want.

like image 45
tungd Avatar answered Feb 15 '23 10:02

tungd