如何处理ReactJS中的onKeyPress事件?

如何使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);
GO逆天L2020/03/10 22:37:15

晚了聚会,但我试图在TypeScript中完成此操作并提出了以下建议:

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

这将打印在屏幕上的确切键。因此,如果要在div处于焦点时响应所有“ a”按下,则可以将e.key与“ a”进行比较-字面上是if(e.key ===“ a”)。

樱小卤蛋2020/03/10 22:37:15

如果要将动态参数传递给函数,请在动态输入内部:

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

希望这对某人有帮助。:)

L西里2020/03/10 22:37:15

React不会给您传递您可能会想到的那种事件。相反,它正在传递综合事件

在简短的测试中,event.keyCode == 0永远都是正确的。你想要的是event.charCode

乐米亚2020/03/10 22:37:15
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDown检测keyCode事件。