Réagissez les utilisateurs, voici une réponse pour être complet.
React version 16.4.2
Vous souhaitez soit mettre à jour pour chaque frappe ou obtenir la valeur uniquement lors de la soumission. L'ajout des événements clés au composant fonctionne, mais il existe des alternatives comme recommandé dans les documents officiels.
Composants contrôlés vs composants non contrôlés
Contrôlé
À partir des documents - Formulaires et composants contrôlés :
En HTML, les éléments de formulaire tels que l'entrée, la zone de texte et la sélection conservent généralement leur propre état et le mettent à jour en fonction des entrées de l'utilisateur. Dans React, l'état mutable est généralement conservé dans la propriété state des composants et mis à jour uniquement avec setState ().
Nous pouvons combiner les deux en faisant de l'état React la «source unique de vérité». Ensuite, le composant React qui restitue un formulaire contrôle également ce qui se passe dans ce formulaire lors de la saisie par l'utilisateur. Un élément de formulaire d'entrée dont la valeur est ainsi contrôlée par React est appelé «composant contrôlé».
Si vous utilisez un composant contrôlé, vous devrez maintenir l'état à jour pour chaque modification de la valeur. Pour cela, vous liez un gestionnaire d'événements au composant. Dans les exemples des documents, généralement l'événement onChange.
Exemple:
1) Lier le gestionnaire d'événements dans le constructeur (valeur maintenue à l'état)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Créer une fonction de gestionnaire
handleChange(event) {
this.setState({value: event.target.value});
}
3) Créer une fonction de soumission de formulaire (la valeur est tirée de l'état)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Rendre
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Si vous utilisez des composants contrôlés , votre handleChangefonction sera toujours déclenchée, afin de mettre à jour et de conserver le bon état. L'État aura toujours la valeur mise à jour et lorsque le formulaire sera soumis, la valeur sera prélevée sur l'État. Cela peut être un problème si votre fiche est très longue, car vous devrez créer une fonction pour chaque composant, ou en écrire une simple qui gère la modification de valeur de chaque composant.
Incontrôlé
À partir des documents - Composant non contrôlé
Dans la plupart des cas, nous vous recommandons d'utiliser des composants contrôlés pour implémenter des formulaires. Dans un composant contrôlé, les données de formulaire sont gérées par un composant React. L'alternative est les composants non contrôlés, où les données de formulaire sont gérées par le DOM lui-même.
Pour écrire un composant non contrôlé, au lieu d'écrire un gestionnaire d'événements pour chaque mise à jour d'état, vous pouvez utiliser une référence pour obtenir des valeurs de formulaire à partir du DOM.
La principale différence ici est que vous n'utilisez pas la onChangefonction, mais plutôt onSubmitle formulaire pour obtenir les valeurs et valider si nécessaire.
Exemple:
1) Lier le gestionnaire d'événements et créer une référence à l'entrée dans le constructeur (aucune valeur conservée dans l'état)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Créer une fonction d'envoi de formulaire (la valeur est tirée du composant DOM)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Rendre
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Si vous utilisez des composants non contrôlés , il n'est pas nécessaire de lier une handleChangefonction. Lorsque le formulaire est soumis, la valeur sera prise du DOM et les validations nécessaires peuvent avoir lieu à ce stade. Pas besoin de créer de fonctions de gestionnaire pour aucun des composants d'entrée également.
Votre problème
Maintenant, pour votre problème:
... Je veux qu'il soit appelé lorsque je pousse 'Entrée lorsque le numéro entier a été entré
Si vous souhaitez y parvenir, utilisez un composant non contrôlé. Ne créez pas les gestionnaires onChange si ce n'est pas nécessaire. La enterclé soumettra le formulaire et la handleSubmitfonction sera déclenchée.
Changements que vous devez faire:
Supprimez l'appel onChange dans votre élément
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
});
Gérez le formulaire, soumettez et validez votre saisie. Vous devez obtenir la valeur de votre élément dans la fonction de soumission de formulaire, puis valider. Assurez-vous de créer la référence à votre élément dans le constructeur.
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
}
Exemple d'utilisation d'un composant non contrôlé:
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')
);
onBlurévénement.