web-dev-qa-db-ja.com

反応のreduxフォームのドロップダウンで選択された値を取得する方法

Fieldsのreact reduxを使用していて、クラスのドロップダウンがあります。ドロップダウンから任意のクラスを選択できます。しかし問題は、ドロップダウンから任意の値（クラス）を選択するたびに、アクションonChangeをトリガーすることです。変更時にドロップダウン値でアクションをトリガーすると、値が設定されず、選択した値が表示されません。次のコード行を使用しています

<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>

これはonChange関数です

 onChange(){
     console.log(" Triggered")
  }

OnChangeイベントを設定しないと、ドロップダウンが正しく機能し、選択した値が適切なテキストで正しく表示されます。しかし、値を選択して使用するたびに関数を呼び出したい

reactjsreduxreact-reduxredux-form
13
Muhammad Ateek

コンポーネント全体（およびモジュールやコンテナなど）をJSBinまたはFiddleに配置するなど、このコードのコンテキストを追加できますか？ SOポスターはあなたを助ける方法をよりよく知っています。とはいえ、あなたのコードは正しいようです。あなたは次のような選択した種類から値を得ることができます：

onChange(event) {
  console.log(event.target.value);
}

それは役に立ちますか？

6
jasongonzales

Reduxのフィールドpropと標準のhtml要素を使用した方がよいでしょうか？

const {fields} = this.props
<select {...fields.class} onChange={this.handleChange}>
...

handleChange(event) {
    // do your stuff
    this.props.fields.class.onChange(event)
}
1
Eugene Zinin