javascript - React: Don't use keyUp for onChange events - Stack Overflow

admin管理员组

文章数量:1298180

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.

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.

• javascript
• events
• reactjs
• keyup

Share Improve this question Follow edited Jul 11, 2018 at 9:15 Aliaksandr Sushkevich 12.4k88 gold badges4141 silver badges4646 bronze badges asked Jun 2, 2014 at 15:14 Kyle HotchkissKyle Hotchkiss 11.1k2020 gold badges5959 silver badges8282 bronze badges 2

• Isn't this normally what the 'onBlur' event is for? I'm unfamiliar with the React framework, but I imagine it might support that in some form. – Katana314 Commented Jun 2, 2014 at 15:20
• Sure is. React abstracts events though, it's one of those huge view frameworks – Kyle Hotchkiss Commented Jun 2, 2014 at 15:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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
}

You could build your own ponent 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.

本文标签： javascriptReact Don39t use keyUp for onChange eventsStack Overflow