J'ai ce problème depuis un moment donc j'espère trouver une réponse ici. J'ai essayé d'implémenter une simple balise de sélection basée sur le code donné dans les documents de réaction. Cependant, cela ne fonctionne pas pour moi. Voici le code que j'ai écrit :

<select value={this.state.formId} onChange={this.handleInternalFormChange}>
                        {
                            Object.keys(this.state.userForms).map(formKey => ( 
                                <option key={formKey} value={formKey} > {this.state.userForms[formKey]} </option>
                            ))
                        }

Et voici la fonction qui appelle onChange,

 handleInternalFormChange = (e) =>{
        this.setState({
            formId: e.target.value
        })
        console.log(this.state.formId);

    }

Après avoir effectué ces modifications, la fonction onChange ne semble pas fonctionner. J'ai essayé d'imprimer l'événement appelé mais il ne semble pas contenir de target. Vous ne savez plus quoi faire, quelqu'un peut-il vous aider?

2
user5735224 17 mars 2019 à 08:09

2 réponses

Meilleure réponse

Il n'y a rien de mal avec la façon dont vous le faites actuellement. La raison pour laquelle votre console.log() n'imprime pas l'état est que setState() est asynchrone (console.log() est également asynchrone d'ailleurs). Si vous souhaitez voir quel est l'état mis à jour, utilisez le deuxième paramètre de setState(), qui vous fournit la nouvelle valeur.

Vous pouvez confirmer que l'événement est utilisé dans onChnage() en remplaçant votre appel de fonction par :

<select onChange={e=>console.log(e.target.value)}>

Si vous souhaitez vérifier la valeur après la mise à jour de votre état, procédez comme suit :

this.setState({value}, updatedState=>console.log(updatedState));

En espérant que cela aide à clarifier les choses,

2
Miroslav Glamuzina 17 mars 2019 à 05:43

Si vous voulez obtenir le résultat console.log, cochez ceci

 handleInternalFormChange = (e) =>{
        this.setState({
            formId: e.target.value
        }, () => {
           console.log(this.state.formId);
        })

    }
1
kkangil 17 mars 2019 à 05:43