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, Mar 13 '19 at 17:53

Mayank Shukla · Accepted Answer · 2017-04-13T06:16:36.623

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.

[KeyboardEvent.keyCode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) is deprecated, maybe we should use [KeyboardEvent.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) or [KeyboardEvent.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) instead ? — Tina Chen, Jul 17 '18 at 01:27

score 78 · Answer 2 · edited Jan 09 '23 at 12:34

78

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 09 '23 at 12:34

Liran H

9,143
7
39
52

answered Sep 12 '17 at 09:17

sunaina kotekar

933
7
7

8

This doesn't explain how to get the value of the target TextField in the callback specified for `onKeyPress`. – Neil Jun 04 '19 at 23:42
how do you actually get the value of the TextFiled? – PLO Jan 02 '20 at 22:22
control the component and useState for value – Nicholas Gentile Feb 09 '21 at 04:50
`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) }` – chichilatte Apr 26 '21 at 16:11
@Neil, @PLO - `ev.target.value` – vsync Feb 25 '22 at 21:39
deprecated in mui – Ivan Yulin Jul 13 '22 at 13:17
Shouldn't the `ev.preventDefault();` come before the `Do code here`? – I.sh. Apr 23 '23 at 22:14

NearHuscarl · Answer 3 · 2022-02-26T06:51:14.063

12

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 '22 at 06:51

answered Nov 10 '21 at 05:05

NearHuscarl

66,950
18
261
230

This has nothing to do with `MUI v5`. This is regular DOM event which any version of the `TextField` component exposes to developers. – vsync Feb 25 '22 at 21:40
@vsync sorry for the confusion, I've updated this answer.. – NearHuscarl Feb 26 '22 at 06:51
But why did you give an **exact** same answer (recently) when the same ones were given here years ago? – vsync Feb 26 '22 at 10:09
your demo isn't working – elad silver Jul 08 '22 at 15:09

score 2 · Answer 4 · answered Sep 10 '21 at 14:13

2

<input onKeyPress={onKeyPress}/> 

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

answered Sep 10 '21 at 14:13

Skender Ademi

71
1
2

score 0 · Answer 5 · answered Apr 13 '17 at 05:21

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 '17 at 05:21

manish

1,450
8
13

1

Please ask the OP for what they have tried before posting your own code. – Dhiraj Apr 13 '17 at 05:22
1

why define `enterKey` and using memory when you can just write 13 in the `if` – amir hosein ahmadi Apr 15 '19 at 13:27
10

@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` – Hafiz Temuri Nov 28 '19 at 15:10
1

Next time, Please try providing some information about your code. – Patricio Vargas Jan 14 '21 at 06:29

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

5 Answers5

Live Demo

Linked