在Reaction中按Enter键时如何获取TextField值？

沃梦达教程前端问题

2022-01-01

How to get the TextField value when enter key is pressed in React?(在Reaction中按Enter键时如何获取TextField值？)

本文介绍了在Reaction中按Enter键时如何获取TextField值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在用户从键盘按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} />
      )
   }
}

推荐答案

UseonKeyDown事件，在事件内部检查用户按键的按键代码。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-UiTextField并定义其他属性。

这篇关于在Reaction中按Enter键时如何获取TextField值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：在Reaction中按Enter键时如何获取TextField值？