Reagisci agli utenti, ecco una risposta per completezza.
Reagire versione 16.4.2
O vuoi aggiornare per ogni sequenza di tasti, o ottenere il valore solo al momento dell'invio. L'aggiunta degli eventi chiave al componente funziona, ma ci sono alternative come raccomandato nei documenti ufficiali.
Componenti controllati e non controllati
Controlled
Da Documenti - Moduli e componenti controllati :
In HTML, elementi del modulo come input, textarea e select in genere mantengono il proprio stato e lo aggiornano in base all'input dell'utente. In React, lo stato mutabile viene in genere mantenuto nella proprietà state dei componenti e aggiornato solo con setState ().
Possiamo combinare i due facendo diventare lo stato Reattivo la "singola fonte di verità". Quindi il componente React che esegue il rendering di un modulo controlla anche cosa succede in quel modulo al successivo input dell'utente. Un elemento del modulo di input il cui valore è controllato da React in questo modo è chiamato "componente controllato".
Se si utilizza un componente controllato, è necessario mantenere lo stato aggiornato per ogni modifica al valore. Perché ciò accada, si associa un gestore eventi al componente. Negli esempi dei documenti, di solito l'evento onChange.
Esempio:
1) Gestore dell'evento associato nel costruttore (valore mantenuto nello stato)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Crea funzione gestore
handleChange(event) {
this.setState({value: event.target.value});
}
3) Crea la funzione di invio del modulo (il valore è preso dallo stato)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Rendering
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Se si utilizzano componenti controllati , la handleChangefunzione verrà sempre attivata, al fine di aggiornare e mantenere lo stato corretto. Lo stato avrà sempre il valore aggiornato e quando il modulo viene inviato, il valore verrà preso dallo stato. Questo potrebbe essere un contro se il tuo modulo è molto lungo, perché dovrai creare una funzione per ogni componente o scriverne una semplice che gestisca il cambio di valore di ogni componente.
sfrenato
Da Documenti - Componente non controllato
Nella maggior parte dei casi, si consiglia di utilizzare componenti controllati per implementare i moduli. In un componente controllato, i dati del modulo sono gestiti da un componente React. L'alternativa sono i componenti non controllati, in cui i dati dei moduli sono gestiti dal DOM stesso.
Per scrivere un componente non controllato, invece di scrivere un gestore eventi per ogni aggiornamento di stato, è possibile utilizzare un riferimento per ottenere i valori del modulo dal DOM.
La differenza principale qui è che non si utilizza la onChangefunzione, ma piuttosto onSubmitil modulo per ottenere i valori e convalidare se necessario.
Esempio:
1) Associa il gestore eventi e crea riferimento all'input nel costruttore (nessun valore mantenuto nello stato)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Crea la funzione di invio del modulo (il valore è preso dal componente DOM)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Rendering
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Se si utilizzano componenti non controllati , non è necessario associare una handleChangefunzione. Quando il modulo viene inviato, il valore verrà preso dal DOM e le convalide necessarie possono avvenire a questo punto. Non è necessario creare alcuna funzione del gestore per nessuno dei componenti di input.
Il tuo problema
Ora, per il tuo problema:
... Voglio che venga chiamato quando premo 'Invio quando è stato inserito l'intero numero
Se si desidera ottenere ciò, utilizzare un componente non controllato. Non creare i gestori onChange se non è necessario. La enterchiave invierà il modulo e la handleSubmitfunzione verrà attivata.
Modifiche che devi fare:
Rimuovi la chiamata onChange nel tuo elemento
var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
// bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
// onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});
Gestisci il modulo di invio e convalida i tuoi input. È necessario ottenere il valore dall'elemento nella funzione di invio del modulo e quindi convalidare. Assicurati di creare il riferimento al tuo elemento nel costruttore.
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
Esempio di utilizzo di un componente non controllato:
class NameForm extends React.Component {
constructor(props) {
super(props);
// bind submit function
this.handleSubmit = this.handleSubmit.bind(this);
// create reference to input field
this.input = React.createRef();
}
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
console.log('value in input field: ' + value );
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
onBlurall'evento.