javascript - How to detect 'Enter' key on keyPress when used with React - Stack Overflow

admin管理员组

文章数量:1287581

I am using ReactJs to develop my application. I am trying to submit an input text when Enter is pressed by handling the onKeyPress event. It detects other inputs, but not enter. I have tried different ways - event.key, event.charCode, event.keyCode, event.which... Nothing seems to work.

React.createElement("input", {tabIndex: "1", onKeyPress: this.handleKeyPress, onChange: this.handleChange, 
                           placeholder: "ex: 1,10,15"}), 

handleChange: function (event) {
        this.setState({userInputBuckets: event.target.value});
    },
handleKeyPress: function (event) {
        if (event.charCode == 13) {
            event.preventDefault();
            this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
        }
    },

I also tried with onKewDown handling, it detects the correct key, but it doesn't execute the if block even though it evaluates event.keyCode == 13 as true.

I am using ReactJs to develop my application. I am trying to submit an input text when Enter is pressed by handling the onKeyPress event. It detects other inputs, but not enter. I have tried different ways - event.key, event.charCode, event.keyCode, event.which... Nothing seems to work.

React.createElement("input", {tabIndex: "1", onKeyPress: this.handleKeyPress, onChange: this.handleChange, 
                           placeholder: "ex: 1,10,15"}), 

handleChange: function (event) {
        this.setState({userInputBuckets: event.target.value});
    },
handleKeyPress: function (event) {
        if (event.charCode == 13) {
            event.preventDefault();
            this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
        }
    },

I also tried with onKewDown handling, it detects the correct key, but it doesn't execute the if block even though it evaluates event.keyCode == 13 as true.

• javascript
• reactjs
• keypress
• onkeypress

Share Improve this question Follow edited Jul 7, 2017 at 6:39 DarkCygnus 7,83844 gold badges3838 silver badges6262 bronze badges asked Jul 6, 2017 at 21:13 saumjsaumj 17111 gold badge22 silver badges1111 bronze badges 6

• Is this input being created in a form? It might be firing the submit event instead of keypress. Have you tried the keyDown event and seeing if it can capture the key stroke? – Deadron Commented Jul 6, 2017 at 21:18
• Yes, I tried with onKeyDown as well. It's bypassing the if block after evaluating the condition to true. – saumj Commented Jul 6, 2017 at 21:21
• "it doesn't execute the if block even though it evaluates event.keyCode == 13 as true" that isn't right, unless you're using a very buggy JS engine. It's likely that the code inside throws an Error. – joews Commented Jul 6, 2017 at 21:29
• I tried that again. It executes the block, but results in an error at event.stopPropogation() at some other place where event is undefined. – saumj Commented Jul 6, 2017 at 21:39
• OK. You'll need to post that part of the code to get some help. – joews Commented Jul 6, 2017 at 21:55

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

Move e.stopPropagataion from handleSubtotalBy into handleKeyPress:

handleKeyPress(event) {
  if (event.charCode == 13) {
    event.preventDefault();
    event.stopPropagation();
    this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
  }
}


handleSubtotalBy(columnDef, partitions) { 
  const subtotalBy = this.state.subtotalBy || [];
  // ...
}

Given answer is not plete,

use

var code = event.keyCode || event.charCode

to support all browser:

Other than this, given answer is correct. Copy that.

本文标签： javascriptHow to detect 39Enter39 key on keyPress when used with ReactStack Overflow