0
129
Vistas¿Cómo obtener el valor de TextField cuando se presiona la tecla Intro en React?
Quiero pasar los valores de TextField cuando el usuario presiona la tecla Intro desde el teclado. En el evento onChange() , obtengo el valor del cuadro de textbox , pero ¿cómo obtener este valor cuando se presiona la tecla enter ?
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} /> ) } }
·
Santiago Trujillo
3 Respuestas
Responde la pregunta0
Use el evento onKeyDown , y dentro de eso verifique el código de tecla de la tecla presionada por el usuario. El código clave de la tecla Enter es 13, verifique el código y coloque la lógica allí.
Mira este ejemplo:
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: Reemplace el elemento de input por Material-Ui TextField y defina también las otras propiedades.
·
Santiago Trujillo
Denunciar
0
Agregar onKeyPress funcionará onChange en el campo de texto.
<TextField onKeyPress={(ev) => { console.log(`Pressed keyCode ${ev.key}`); if (ev.key === 'Enter') { // Do code here ev.preventDefault(); } }} />
·
Santiago Trujillo
Denunciar
0
Puede usar e.target.value para obtener el valor actual del elemento de input si está usando el modo no controlado .
<TextField onKeyPress={(e) => { if (e.key === 'Enter') { alert(e.target.value); } }} />Demo en vivo
·
Santiago Trujillo
Denunciar
Responde la pregunta