如何在React中按下回车键时获取TextField的值？

Question

当用户按下键盘的 enter 键时，我希望能够传递 TextField 的值。在 onChange() 事件中，我可以获取 textbox 的值，但是如何在按下 enter 键时获取这个值呢？

代码：

import TextField from 'material-ui/TextField';

class CartridgeShell extends Component {

   constructor(props) {
      super(props);
      this.state = {value:''}
      this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   render(){
      return(
         <TextField 
             hintText="First Name" 
             floatingLabelText="First Name*"
             value={this.state.value} 
             onChange={this.handleChange} 
             fullWidth={true} />
      )
   }
}

- Soumya Behera

---

你的代码在哪里展示你的尝试了吗？ - repzero

似乎mui防止使用原生浏览器功能，强制手动重新实现，使用较低级别的代码（手动检查按键）。我有所遗漏吗？（诚实的问题，我对mui很新，并尝试重新调整我的思维。） - ballenf

Answer 1

使用 onKeyDown 事件，然后在其中检查用户按下的键的键代码。 Enter 键的键代码是13，检查该代码并在那里放置逻辑。

请参考此示例：

class CartridgeShell extends React.Component {

   constructor(props) {
      super(props);
      this.state = {value:''}

      this.handleChange = this.handleChange.bind(this);
      this.keyPress = this.keyPress.bind(this);
   } 
 
   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   keyPress(e){
      if(e.keyCode == 13){
         console.log('value', e.target.value);
         // put the login here
      }
   }

   render(){
      return(
         <input value={this.state.value} onKeyDown={this.keyPress} onChange={this.handleChange} fullWidth={true} />
      )
    }
}

ReactDOM.render(<CartridgeShell/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id = 'app' />

注意：将 input 元素替换为 Material-Ui 的 TextField 并定义其他属性。

- Mayank Shukla

---

KeyboardEvent.keyCode 已被弃用，也许我们应该使用 KeyboardEvent.key 或者 KeyboardEvent.code 代替？ - Tina Chen

请使用 e.key === "Enter" 替代。 - Gabriel Linassi

Answer 2

在文本框中添加 onKeyPress 事件将会在 onChange 事件上生效。

<TextField
  onKeyDown={(ev) => {
    console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
      // Do code here
      ev.preventDefault();
    }
  }}
/>

- sunaina kotekar

---

这并未说明如何在特定于 onKeyPress 回调函数中获取目标 TextField 的值。 - Neil

你如何实际获取TextField的值？ - PLO

控制组件并使用useState来管理值。 - Nicholas Gentile

onKeyPress happens before the field's value is actually set. Crap, i know. You can get the value of the textfield with the onChange prop... onChange={ ev => console.log(ev.target.value) } - chichilatte

@Neil，@PLO - ev.target.value - vsync

Answer 3

如果你正在使用不受控制的模式，那么可以使用e.target.value来获取元素的当前值。

<TextField
  onKeyPress={(e) => {
    if (e.key === 'Enter') {
      alert(e.target.value);
    }
  }}
/>

演示实例

- NearHuscarl

---

这与 MUI v5 无关。任何版本的 TextField 组件都会向开发人员公开此常规 DOM 事件。 - vsync

@vsync 对于造成的困惑我很抱歉，我已经更新了这个答案。 - NearHuscarl

但是为什么你最近给出了一个完全相同的答案，而几年前这里已经有人给出了同样的答案呢？ - vsync

你的演示不起作用。 - elad silver

Answer 4

<input onKeyPress={onKeyPress}/> 

const onKeyPress = (e: any) => { if (e.which == 13) { // your function }};

- Skender Ademi

Answer 5

HTML

<input id="something" onkeyup="key_up(this)" type="text">

脚本

function key_up(e){
    var enterKey = 13; //Key Code for Enter Key
    if (e.which == enterKey){
        //Do you work here
    }
}

下次请尝试提供一些代码。

- manish

---

在发布您自己的代码之前，请询问原帖作者尝试了哪些方法。 - Dhiraj

为什么要定义 enterKey 并使用内存，当你可以在 if 中直接写 13 呢？ - amir hosein ahmadi

现在的人们更关注编写整洁易懂的代码，而不是关注内存。我在我的项目中使用了 prettier 工具，它不允许我使用任何魔法数字，而是强制使用 const 来定义数字的含义。比起使用数字 13，我更希望看到 enterKey 的出现。 - Hafiz Temuri

下次，请尝试提供一些关于您的代码的信息。 - Patricio Vargas