如何添加onKeyPress事件来响应material-ui textfield？

Question

我使用了TextField反应材料-ui.我想知道用户是否按下了Ctrl + Enter.我尝试过使用onKeyPress事件但没有结果.我怎样才能做到这一点？

<TextField
    value={this.state.message}
    autoFocus={true}
    hintText='Type your message here'
    onChange={this.onChangeMessage}
    onKeyPress={(event) => {
        if (event.ctrlKey && event.keyCode == '13')
            this.sendMessage();
    }}
    multiLine={true}
/>

Answer 1

onKeyPress是提到,支持做出反应合成关键事件在这里.试试这段代码:

 onKeyPress= (e) => {
            if (e.key === 'Enter') {
              console.log('Enter key pressed');
              // write your functionality here
            }
    }

Answer 2

也许你应该试试 onKeyUp 而不是 onKeyPress

<TextField
    value={this.state.message}
    autoFocus={true}
    hintText='Type your message here'
    onChange={this.onChangeMessage}
    onKeyUp={(event) => {
        if (event.ctrlKey && event.key== 'Enter')
            this.sendMessage();
    }}
    multiLine={true}
/>

Answer 3

你最好onKeyDown用于这个目的。原因如下（链接）：

• 当用户按下某个键时触发 onKeyDown 事件。
• 当用户松开按键时触发 onKeyUp 事件。
• onKeyPress 事件实际上是一个 onKeyDown 后跟一个 onKeyUp。

所以，代码将是：

onKeyDown={(e) => {
   if (e.key === "Enter") {
      desiredFunction();
   }
}}