如何添加onKeyPress事件来反应材料ui文本字段

Question

我使用了来自反应材料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}
/>

Answer 1

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

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();
}
}}

Answer 4

使用材料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

你可以使用这个技巧：

<TextField
value={this.state.message}
autoFocus={true}
hintText='Type your message here'
onChange={this.onChangeMessage}
onKeyDown={(event) => {
var evtobj = window.event ? event : e
if (evtobj.ctrlKey && evtobj.key == 'Enter')
this.sendMessage()
}}
multiLine={true}
/>

Answer 6

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

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

请参阅关键代码值链接