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

IT技术 javascript reactjs material-ui
2021-03-29 00:34:16

我想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} />
      )
   }
}
5个回答

使用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' />

注意：用inputMaterial-Ui替换元素TextField并定义其他属性。

使用 e.key === "Enter" 代替
2021-05-28 00:34:16
KeyboardEvent.keyCode已过时，也许我们应该用KeyboardEvent.key或KeyboardEvent.code呢？
2021-06-19 00:34:16

添加 onKeyPress 将适用于文本字段中的 onChange。

<TextField
  onKeyPress={(ev) => {
    console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
      // Do code here
      ev.preventDefault();
    }
  }}
/>
这并没有解释如何在为 指定的回调中获取目标 TextField 的值onKeyPress。
2021-05-27 00:34:16
你实际上是如何获得 TextFiled 的值的？
2021-06-02 00:34:16
控制组件和 useState 的值
2021-06-05 00:34:16
onKeyPress在实际设置字段值之前发生。废话，我知道。您可以使用onChange道具获取文本字段的值...onChange={ ev => console.log(ev.target.value) }
2021-06-15 00:34:16

MUI v5 更新

如果您使用的是非受控模式，则可以使用e.target.value来获取input元素的当前值。

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

现场演示

代码沙盒演示

<input onKeyPress={onKeyPress}/> 

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

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
    }
}

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

enterKey当您可以在其中写入 13 时，为什么要定义和使用内存if
2021-05-29 00:34:16
在发布您自己的代码之前，请向 OP 询问他们尝试过的内容。
2021-05-30 00:34:16
下次，请尝试提供有关您的代码的一些信息。
2021-06-08 00:34:16
@amirhoseinahmadi 如今，没有人像编写干净易懂的代码一样关心内存。我在我的项目中有更漂亮的地方，它不允许我使用任何幻数。它强制使用 aconst来定义数字是关于什么的。我宁愿看到enterKey而不仅仅是13
2021-06-12 00:34:16
其它你可能感兴趣的问题
上一篇在 TypeScript React 中导入图像 - “找不到module” 下一篇如何将原始数据主体添加到 axios 请求？