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是React支持的合成Key事件，如上所述here。试试这段代码：

 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。这是原因（link）：

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

因此，代码将是：

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

Answer 4

使用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 })
                }
              />

Answer 5

请使用以下代码

更新onKeyPress事件

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

请参阅Key Code Values

的链接

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

5 个答案: