how to get selected value onChange of react redux-form drop down

reactjs redux react-redux redux-form
Muhammad Ateek picture Muhammad Ateek · Jul 26, 2016 · Viewed 10.2k times · Source

I am using react redux form Fields and I have drop down of classes. I am able to select any class from drop down. but the issue is that whenever I select any value (class) from drop down I want to trigger action onChange. When I trigger action with on change drop down values does not set and it does not show selected value. I am using following lines of code

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

here is onChange function 

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

If I do not set onChange event my drop down works correctly and it shows selected value correctly with proper text. but I want to call function whenever use select any value

Answer

jasongonzales picture jasongonzales · Jul 26, 2016

Can you give more context for this code, perhaps putting the whole component (and any modules or containers or whatever) in a JSBin or Fiddle? That will help SO posters better know how to help you. That said, it looks like your code is correct. You can get the value out of the select kind of like this:

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

Does that help?

Related questions

Redux-Form initial values from

I'm trying to fill the profile form with data from API. Unfortunately redux-form doesn't want to cooperate with me in this case. For some reason fields stays empty whatever I do. Setting the fixed values instead of values passed from …

Read More
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import createHistory from 'history/createBrowserHistory'; import { Provider } from 'react-redux'; import ConnectedRouter from 'react-router-redux'; import { Route, Switch } from 'react-router'; import Home from "./pages/Home"; import Register from "./pages/Register"; …

Read More
redux-form: How to disable submit button if at least one Field is not valid?

I'm rendering the below simple form using redux-form and it's working nicely. Now, I'd like to have the submit button disabled in one more situation: If any of the Field's has an error (i.e. it's meta.error is set). …

Read More