如何添加 onKeyPress 事件以响应 material-ui 文本字段？答案

【问题标题】：How can I add onKeyPress event to react material-ui textfield?如何添加 onKeyPress 事件以响应 material-ui 文本字段？
【发布时间】：2018-02-10 02:56:15
【问题描述】：

我使用了来自 react material-ui 的 TextField。我想知道用户是否按下了 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}
/>

【问题讨论】：

如果你想获得 keyCode 值，你应该使用 onKeyDown 而不是 onKeyPress。

标签： reactjs material-ui

【解决方案1】：

onKeyPress 是 React 支持的合成 Key 事件，如 here 所述。试试这个代码：

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

【讨论】：

【解决方案2】：

请使用以下代码更新 onKeyPress 事件

if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey)

请查看Key Code Values的链接

【讨论】：

event.keyCode 已弃用

【解决方案3】：

也许你应该试试 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}
/>

【讨论】：

谢谢，导航键或 esc 不会触发 onKeyPress，但会触发 onKeyUp

【解决方案4】：

为此，您最好使用onKeyDown。原因如下（link）：

onKeyDown 事件在用户按键时触发。
onKeyUp 事件在用户释放按键时触发。
onKeyPress 事件实际上是一个 onKeyDown 后跟一个 onKeyUp。

所以，代码将是：

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

【讨论】：

【解决方案5】：

使用 material-ui 和我正在使用的打字稿：

              <TextInput
                id="password"
                label="Password"
                type="password"
                onKeyPress={(data: any) => {
                  if (data.charCode === 13) {
                    console.log("Key `Enter` pressed");
                  }
                }}
                value={password}
                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                  this.setState({ password: event.target.value })
                }
              />

【讨论】：