need to get value of dropdown menu without using o

问题:

i am using material UI dropdown component and trying to run a callback function only when user fills all the form and submits the form. On the call back function i intend to collect all the form field and generate url to call to api.

My problem is that i can not use onChange as stated solution in #560 as i want to collect all the detail only when user clicks the submit button. It is also weird that at the moment, i am able to get value of all the other form element like slider, textfield which uses material-ui but only dropdown does not seem to be working.

My call back function:

handleFilter: function(event){
event.preventDefault();
var location = this.refs.location.getValue();
var posted_date = this.refs.posted_date.getValue();
var radius = this.refs.distance.getValue();
var salary = this.refs.salary.getValue();

    var jobtype = this.refs.jobtype.getValue();
    console.log(jobtype);       
}

In the above function "location, posted_date, radius, salary" returns value but "jobtype" which happens to be dropdown does not seem to return any value. It returns this error in console: "Uncaught TypeError: this.refs.jobtype.getValue is not a function"

Here is my dropdown component :

<DropDownMenu menuItems={menuItems} ref="jobtype" />

回答1:

May not be the right way but i figured out that

console.log(this.refs.jobtype) (jobtype is the refs value of dropdown in my case)

was giving the following result.

R…s.c…s.Constructor {props: Object, context: Object, state: Object, refs: Object, _reactInternalInstance: ReactCompositeComponentWrapper}

Inpecting it i found value of payload index (index number of selected item) inside state object within "selectedIndex" property. I used following code to access the selected index:

var jobtype = this.refs.jobtype.state.selectedIndex;  

If there is a better way to do this please suggest.