如何处理 ReactJS 中的 `onKeyPress` 事件？

IT技术 javascript reactjs keypress onkeypress
2021-01-24 05:10:20

如何让onKeyPress事件在 ReactJS 中工作？enter (keyCode=13)按下时它应该发出警报。

var Test = React.createClass({
    add: function(event){
        if(event.keyCode == 13){
            alert('Adding....');
        }
    },
    render: function(){
        return(
            <div>
                <input type="text" id="one" onKeyPress={this.add} />    
            </div>
        );
    }
});

React.render(<Test />, document.body);
6个回答

我正在使用 React 0.14.7，使用onKeyPress并event.key运行良好。

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}
你可以在测试中模拟它： Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
2021-03-30 05:10:20
你说的实验是什么意思？我认为 ES6 “functionName(param) => {}” 会起作用吗？
2021-04-05 05:10:20
也许这很迂腐，但值得注意的是，最好===对event.key == 'Enter'.
2021-04-07 05:10:20
@Waltari 这是 ES6箭头函数，这意味着function handleKeyPress(event){...}
2021-04-09 05:10:20
它也绑定 this
2021-04-11 05:10:20

对我来说onKeyPress该e.keyCode是永远0的，但e.charCode有正确的值。如果onKeyDown在e.charCode.

var Title = React.createClass({
    handleTest: function(e) {
      if (e.charCode == 13) {
        alert('Enter... (KeyPress, use charCode)');
      }
      if (e.keyCode == 13) {
        alert('Enter... (KeyDown, use keyCode)');
      }
    },
    render: function() {
      return(
        <div>
          <textarea onKeyPress={this.handleTest} />
        </div>
      );
    }
  });

react键盘事件。

对于那些有兴趣自己尝试 React keyEvents 的人，这是我创建的一个代码和框。
2021-03-14 05:10:20
..所以如果您有兴趣使用箭头键和/或其他非字母数字键，onKeyDown 适合您，因为它们不会返回 keyChar 而是返回 keyCode。
2021-03-28 05:10:20 
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDown检测keyCode事件。

通常通过 onKeyUp 检测到回车键 - 这允许用户在他决定时停止交互。使用 keyPress 或 keyDown 立即执行。
2021-04-05 05:10:20

Keypress 事件已弃用，您应该改用 Keydown 事件。

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

handleKeyDown(event) {
    if(event.keyCode === 13) { 
        console.log('Enter key pressed')
  }
}

render() { 
    return <input type="text" onKeyDown={this.handleKeyDown} /> 
}
它还支持event.key === 'Enter'. 看看这里。
2021-03-22 05:10:20

如果您想在动态输入中将动态参数传递给函数：

<Input 
  onKeyPress={(event) => {
    if (event.key === "Enter") {
      this.doSearch(data.searchParam)
    }
  }}
  placeholder={data.placeholderText} />
/>

希望这可以帮助某人。:)

它对我有用
2021-03-25 05:10:20
其它你可能感兴趣的问题
上一篇以编程方式选择内容可编辑的 HTML 元素中的文本？ 下一篇无法验证叶子签名