How to "onchange" in ReactJS

Roman Stejskal March 7, 2017 Reply

Note that the native implementation (at least in Chrome) of `onChange` and `onBlur` is not the same!

`blur` only triggers once you click (or tab) out of the input (when the input loses focus), whereas `change` can also be triggered by hitting the Enter key!

Yacoub Oweis June 13, 2017 Reply

You are absolutely right about the "Enter key", and this is very important in many cases to maintain a good user experience for the form elements. A simple solution to adopt the behavior of the Enter key is this code snip-it:

<input type="text" onBlur={this.onBlur} onKeyPress={this.handleEnterKeyPress} />

handleEnterKeyPress: function (e) {
        if(e.which == 13){
            e.target.blur();
        }
        return false;
}