¿Cómo obtener valores de campo de texto de entrada cuando se pulsa la tecla enter en react js?

Quiero pasar valores de textfield cuando el usuario pulsa la tecla enter del teclado. En onChange() evento, estoy recibiendo el valor de la textbox, pero ¿Cómo obtener este valor cuando se pulsa la tecla enter?

Codigo:

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} />
      )
   }
}
Mayank Shukla
Pregunta editada 13º abril 2017 в 6:21
Programación
javascript reactjs material-ui
13º abril 2017 в 5:15
No hay vistas aún
Solución

Utiliza el evento "onKeyDown", y dentro comprueba el código de la tecla pulsada por el usuario. El codigo de la tecla Enter es 13, comprueba el codigo y pon la logica ahi.

Mira este ejemplo:

begin snippet: js hide: false console: true babel: true -->

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

Fin del fragmento;

Nota: Sustituye el elemento input por Material-Ui TextField y define también el resto de propiedades.

Mayank Shukla
Respuesta editada 13º abril 2017 в 6:16
Comentarios (2)

Añadiendo onKeyPress funcionará onChange en Campo de Texto.

 {
    console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
      // Do code here
      ev.preventDefault();
    }
  }}
/>
brooksrelyt
Respuesta editada 7º febrero 2019 в 6:47
Comentarios (1)

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

La próxima vez, por favor, intente proporcionar algún código.

Comentarios (3)