javascript - Como obter o valor do TextField quando a tecla Enter é pressionada no React?

Quero passar os valores do TextField quando o usuário pressionar a tecla Enter no teclado. No evento onChange(), eu estou obtendo o valor da textbox, mas como obter esse valor quando a tecla enter é pressionada?

Código :

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

Resposta #1

Use o evento onKeyDown e, dentro dele, verifique o código da tecla pressionada pelo usuário. O código da tecla Enter é 13, verifique o código e coloque a lógica lá.

Confira este exemplo:

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

Nota: Substitua o elemento input pelo TextField do Material-Ui e defina também as outras propriedades.

Resposta #2

Adicionar onKeyPress funcionará onChange no Campo de Texto.

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

Resposta #3

Você pode usar e.target.value para obter o valor atual do elemento input se você estiver usando modo não controlado.

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

Demonstração ao vivo