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

【问题标题】：How to get the TextField value when enter key is pressed in React?在 React 中按下回车键时如何获取 TextField 值？
【发布时间】：2017-09-09 02:10:07
【问题描述】：

当用户从键盘按下回车键时，我想传递 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} />
      )
   }
}

【问题讨论】：

你的代码在哪里显示你试过了？
看起来 mui 阻止使用本机浏览器功能，强制使用较低级别的代码（手动检查按键）手动重新实现。我错过了什么吗？（诚实的问题，我是 mui 新手，正在尝试重新定位我的想法。）

标签： javascript reactjs material-ui

【解决方案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 并同时定义其他属性。

【讨论】：

KeyboardEvent.keyCode 已弃用，也许我们应该改用KeyboardEvent.key 或KeyboardEvent.code ？
改用 e.key === "Enter"

【解决方案2】：

添加 onKeyPress 将对文本字段中的 onChange 起作用。

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

【讨论】：

这里不解释如何在为onKeyPress指定的回调中获取目标TextField的值。
你如何实际获得 TextFiled 的值？
控制组件并使用状态获取值
onKeyPress 发生在实际设置字段值之前。废话，我知道。您可以使用 onChange 属性获取文本字段的值... onChange={ ev => console.log(ev.target.value) }

【解决方案3】：

MUI v5 更新

如果您使用uncontrolled 模式，您可以使用e.target.value 获取input 元素的当前值。

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

现场演示

【讨论】：

【解决方案4】：

<input onKeyPress={onKeyPress}/> 

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

【讨论】：

【解决方案5】：

html

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

script

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

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

【讨论】：

在发布您自己的代码之前，请询问 OP 他们尝试了什么。
为什么要定义 enterKey 并在 if 中只写 13 时使用内存
@amirhoseinahmadi 如今，没有人像编写干净易懂的代码那样关心内存。我在我的项目中有更漂亮的地方，它不允许我使用任何神奇的数字。它强制使用const 来定义数字的含义。我更愿意看到enterKey 而不仅仅是13
下次，请尝试提供一些有关您的代码的信息。