je suis réactif avec les champs de formulaire de redux et j’ai un menu déroulant. Je suis en mesure de sélectionner n'importe quelle classe de la liste déroulante. mais le problème est que chaque fois que je sélectionne une valeur (une classe) dans la liste déroulante, je souhaite déclencher une action sur Change. Lorsque je déclenche une action avec des valeurs de liste déroulante à la modification, elle n'est pas définie et ne montre pas la valeur sélectionnée. im utilisant les lignes de code suivantes
<Field name="class._id" component="select" className="form-control" onChange={this.onChange.bind(this)} >
<option value="">Select class...</option>
{this.props.classes.map(Class =>
<option value={Class._id} key={Class._id} >{Class.name}</option>)}
</Field>
voici la fonction onChange
onChange(){
console.log(" Triggered")
}
si je ne définit pas l'événement onChange, ma liste déroulante fonctionne correctement et affiche la valeur sélectionnée correctement avec le texte approprié. mais je veux appeler la fonction chaque fois que vous sélectionnez une valeur
Pouvez-vous donner plus de contexte à ce code, en mettant peut-être le composant entier (et tous modules, conteneurs ou autres) dans un JSBin ou un violon? Cela aidera SO affiches à mieux vous aider. Cela dit, il semble que votre code soit correct. Vous pouvez obtenir la valeur du type sélectionné comme ceci:
onChange(event) {
console.log(event.target.value);
}
Est ce que ça aide?
Peut-être devriez-vous mieux utiliser les champs prop de redux et des éléments HTML standard?
const {fields} = this.props
<select {...fields.class} onChange={this.handleChange}>
...
handleChange(event) {
// do your stuff
this.props.fields.class.onChange(event)
}