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

Posted 2023-02-21

【中文标题】如何添加 onKeyPress 事件以响应 material-ui 文本字段？

【英文标题】：How can I add onKeyPress event to react material-ui textfield?

【发布时间】：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。

【参考方案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 )
                
              />