React: Don't use keyUp for onChange events

Question

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.

Solution 1

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
}

Solution 2

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.