web-dev-qa-db-fra.com

comment obtenir la valeur sélectionnée surChange de réaction

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

reactjsreduxreact-reduxredux-form
8
Muhammad Ateek

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?

5
jasongonzales

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)
}
1
Eugene Zinin