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

Question

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

It seems like mui prevents use of native browser functionality, forcing manual reimplementation using somewhat lower level code (manually checking keypresses). Am I missing something? (Honest question, I'm new to mui and trying to reorient my thinking.) — ballenf
– ballenf, Commented Mar 13, 2019 at 17:53

Mayank Shukla · Accepted Answer · 2017-04-13 06:16:36Z

150

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.

edited Apr 13, 2017 at 6:16

answered Apr 13, 2017 at 6:11

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tina Chen Over a year ago

KeyboardEvent.keyCode is deprecated, maybe we should use KeyboardEvent.key or KeyboardEvent.code instead ?

Gabriel Linassi Over a year ago

Use e.key === "Enter" instead

Liran H · Accepted Answer · 2023-01-09 12:34:02Z

94

Adding onKeyPress will work onChange in Text Field.

<TextField
  onKeyDown={(ev) => {
    console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
      // Do code here
      ev.preventDefault();
    }
  }}
/>

edited Jan 9, 2023 at 12:34

Liran H

10.8k9 gold badges49 silver badges57 bronze badges

answered Sep 12, 2017 at 9:17

sunaina kotekar

1,0938 silver badges7 bronze badges

8 Comments

Neil Over a year ago

This doesn't explain how to get the value of the target TextField in the callback specified for onKeyPress.

PLO Over a year ago

how do you actually get the value of the TextFiled?

Nicholas Gentile Over a year ago

control the component and useState for value

chichilatte Over a year ago

onKeyPress happens before the field's value is actually set. Crap, i know. You can get the value of the textfield with the onChange prop... onChange={ ev => console.log(ev.target.value) }

vsync Over a year ago

@Neil, @PLO - ev.target.value

|

NearHuscarl · Accepted Answer · 2022-02-26 06:51:14Z

14

You can use e.target.value to get the current value of the input element if you're using uncontrolled mode.

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

Live Demo

edited Feb 26, 2022 at 6:51

answered Nov 10, 2021 at 5:05

NearHuscarl

83.1k24 gold badges321 silver badges291 bronze badges

4 Comments

vsync Over a year ago

This has nothing to do with MUI v5. This is regular DOM event which any version of the TextField component exposes to developers.

NearHuscarl Over a year ago

@vsync sorry for the confusion, I've updated this answer..

vsync Over a year ago

But why did you give an exact same answer (recently) when the same ones were given here years ago?

elad silver Over a year ago

your demo isn't working

Skender Ademi · Accepted Answer · 2021-09-10 14:13:02Z

2

<input onKeyPress={onKeyPress}/> 

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

answered Sep 10, 2021 at 14:13

Skender Ademi

911 silver badge2 bronze badges

Comments

manish · Accepted Answer · 2017-04-13 05:21:14Z

0

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

Next time, Please try providing some code.

answered Apr 13, 2017 at 5:21

manish

1,4588 silver badges13 bronze badges

4 Comments

Dhiraj Over a year ago

Please ask the OP for what they have tried before posting your own code.

amir hosein ahmadi Over a year ago

why define enterKey and using memory when you can just write 13 in the if

Hafiz Temuri Over a year ago

@amirhoseinahmadi Nobody cares about memory these days as much as writing clean and understandable code. I have prettier in place in my project which does not let me use any magic numbers. It enforces to use a const instead, to define what number is about. I would prefer to see enterKey than just 13

Patricio Vargas Over a year ago

Next time, Please try providing some information about your code.

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

8 Comments

Live Demo

4 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

8 Comments

Live Demo

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related