appeler l’événement onChange après avoir appuyé sur la touche Entrée

Je suis nouveau à bootstrap et coincé avec ce problème. J’ai un champ de saisie et dès que je saisis un seul chiffre, la fonction onChange est appelée, mais je souhaite qu’elle soit appelée lorsque je pousse ‘Entrée lorsque le nombre entier a été entré. Le même problème pour la fonction de validation – il appelle trop tôt.

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

Merci!

Selon React Doc , vous pouvez écouter des événements de clavier, comme onKeyPress ou onKeyUp , pas onKeyUp .

 var Input = React.createClass({ render: function () { return ; }, _handleKeyPress: function(e) { if (e.key === 'Enter') { console.log('do validate'); } } }); 

Mise à jour: Utiliser React.Component

Voici le code utilisant React.Component qui fait la même chose

 class Input extends React.Component { _handleKeyPress = (e) => { if (e.key === 'Enter') { console.log('do validate'); } } render() { return  } } 

Voici le jsfiddle .

En appuyant sur Entrée lorsque le focus sur un contrôle de formulaire (entrée) déclenche normalement un événement de submit (onSubmit) sur le formulaire lui-même (et non sur l’entrée), vous pouvez lier this.handleInput au formulaire onSubmit.

Sinon, vous pouvez le lier à l’événement de blur (onBlur) sur l’ input qui se produit lorsque le focus est supprimé (par exemple, tabulation sur l’élément suivant qui peut avoir le focus)

Vous pouvez utiliser onKeyPress directement sur le champ de saisie. La fonction onChange modifie la valeur de l’état de chaque changement de champ d’entrée et, après avoir appuyé sur Entrée, appelle une recherche de fonction ().

  {this.setState({query: event.target.value})}} onKeyPress={event => { if (event.key === 'Enter') { this.search() } }} /> 

Vous pouvez utiliser event.key

 function Input(props) { return ( 
Input
) } class Form extends React.Component { constructor(props) { super(props) this.handleKeyPress = this.handleKeyPress.bind(this) } handleKeyPress(event) { if (event.key === 'Enter') { console.log('enter key pressed') } } render() { return (
); } }

Réagir aux utilisateurs, voici une réponse à l’exhaustivité.

Réagir à la version 16.4.2

Vous voulez soit mettre à jour pour chaque frappe, ou obtenir la valeur uniquement à soumettre. L’ajout des événements clés au composant fonctionne, mais il existe des alternatives recommandées dans les documents officiels.

Composants contrôlés vs non contrôlés

Contrôlé

À partir de Docs – Formulaires et composants contrôlés :

En HTML, les éléments de formulaire tels que input, textarea et select 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 de réaction la «source unique de vérité». Ensuite, le composant React qui affiche un formulaire contrôle également ce qui se passe sous cette forme lors d’une saisie ultérieure par l’utilisateur. Un élément de formulaire en entrée dont la valeur est contrôlée par React de cette manière est appelé «composant contrôlé».

Si vous utilisez un composant contrôlé, vous devrez garder l’état mis à jour à chaque modification de la valeur. Pour cela, vous liez un gestionnaire d’événement au composant. Dans les exemples de documents, généralement l’événement onChange.

Exemple:

1) Gestionnaire d’événements de liaison dans le constructeur (valeur conservée dans 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 d’envoi de formulaire (la valeur provient de l’état)

 handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } 

4) Render

 

Si vous utilisez des composants contrôlés , votre fonction handleChange sera toujours déclenchée, afin de mettre à jour et de conserver l’état correct. L’état aura toujours la valeur mise à jour et, une fois le formulaire soumis, la valeur sera prise à partir de l’état. Cela peut être un inconvénient si votre formulaire est très long, car vous devrez créer une fonction pour chaque composant, ou en écrire une simple pour gérer le changement de valeur de chaque composant.

Incontrôlé

De la documentation – 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énement pour chaque mise à jour d’état, vous pouvez utiliser une référence pour obtenir les valeurs de formulaire du DOM.

La principale différence est que vous n’utilisez pas la fonction onSubmit , mais plutôt le onSubmit du formulaire pour obtenir les valeurs et les valider si nécessaire.

Exemple:

1) Lier le gestionnaire d’événement et crée la référence pour entrer 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 de soumission de formulaire (la valeur provient du composant DOM)

 handleSubmit(event) { alert('A name was submitted: ' + this.input.current.value); event.preventDefault(); } 

3) Render

 

Si vous utilisez des composants non contrôlés , il n’est pas nécessaire de lier une fonction handleChange . Lorsque le formulaire est soumis, la valeur sera extraite du DOM et les validations nécessaires peuvent se produire à ce stade. Il n’est pas nécessaire de créer des fonctions de gestionnaire pour les composants d’entrée.

Votre problème

Maintenant, pour votre problème:

… je veux qu’il soit appelé quand je pousse ‘Entrez quand le nombre entier a été entré

Si vous voulez y parvenir, utilisez un composant non contrôlé. Ne créez pas les gestionnaires onChange si ce n’est pas nécessaire. La touche enter soumettra le formulaire et la fonction handleSubmit sera déclenchée.

Codepen officiel pour jouer avec