Question

22

How to get the TextField value when enter key is pressed in React?

rated 0 times [ 29] [ 7] / answers: 1 / hits: 184936 / 7 Years ago, thu, april 13, 2017, 12:00:00

I want to pass TextField values when user press enter key from keyboard. In onChange() event, I am getting the value of the textbox, but How to get this value when enter key is pressed ?

Code:

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

      )

   }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brandensebastiand

Add To Favorites

Follow

Total Points: 323

Total Questions: 115

Total Answers: 106

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

answered 7 Years ago patienceannel · Accepted Answer

Use onKeyDown event, and inside that check the key code of the key pressed by user. Key code of Enter key is 13, check the code and put the logic there.

Check this example:

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

Note: Replace the input element by Material-Ui TextField and define the other properties also.