在React JS中按下Enter键时如何获取输入文本字段值？

Question

我想textfield在用户按下键盘上的Enter键时传递值。在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} />
      )
   }
}

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

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