la questione può essere correlato React-bootstrap. React-bootstrap ha anche un modo per gestire l'istanza quando viene premuto un pulsante o tasto Invio o qualsiasi elemento del modulo.
Il codice qui sotto spiega come gestire un esempio, quando si preme enterkey senza il coinvolgimento di React Handlers. (E che lo rende fresco)
import React from "react";
import ReactDOM from "react-dom";
import { FormGroup, FormControl } from "react-bootstrap";
class TestInput extends Component {
search() {
console.log("Enter Button Pressed");
}
render() {
return (
<FormGroup>
<InputGroup>
<FormControl
placeholder="Press Enter"
type="input"
onKeyPress={event => {
if (event.key === "Enter") {
this.search();
}
}}
/>
</InputGroup>
</FormGroup>
);
}
}
Reagire Bootstrap non supporta più elemento modulo di ingresso. Invece ha introdotto sotto gli articoli a vostra disposizione
Il componente FormGroup racchiude un controllo di modulo con spaziatura corretta, insieme al supporto per un'etichetta, un testo di guida e uno stato di convalida.
Avvolgere il controllo del modulo in un InputGroup, quindi utilizzare per i normali componenti aggiuntivi e per i componenti aggiuntivi del pulsante.
Il componente FormControl esegue il rendering di un controllo modulo con lo stile Bootstrap.
Riferimenti:
https://react-bootstrap.github.io/components.html#forms https://react-bootstrap.github.io/components.html#forms-input-groups
Grazie per il link, mi chiedo perché non ho trovato prima! Il mio errore era usare 'onKeydown' invece di' onKeyDown' – mguijarr