在Reaction中按Enter键时如何获取TextField值？-前端问题

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="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvcmVhY3QvMTUuMS4wL3JlYWN0Lm1pbi5qcw=="></script>
<script src="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvcmVhY3QvMTUuMS4wL3JlYWN0LWRvbS5taW4uanM="></script>


<div id = 'app' />

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

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