需要获取下拉菜单的值而不使用onChange回调-(material-ui reactjs) [英] need to get value of dropdown menu without using onChange callback - (material-ui reactjs)

问题描述

我正在使用实质性用户界面下拉组件，并尝试运行回调函数仅当用户填写所有表格并提交表格时.在回叫功能上，我打算收集所有表单字段并生成要调用api的url.

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.

我的问题是我无法在#560 因为我只想在用户单击提交"按钮时收集所有详细信息.奇怪的是，此刻，我能够获得所有其他表单元素的值，例如使用material-ui但仅下拉列表似乎不起作用的滑块，文本字段.

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.

我的回叫功能:

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);       
}

在上面的函数"location，posted_date，radius，salary"中返回值，但是恰好下拉的"jobtype"似乎未返回任何值.它在控制台中返回此错误: 未捕获的TypeError:this.refs.jobtype.getValue不是函数"

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"

这是我的下拉菜单:

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

推荐答案

可能不是正确的方法，但我发现了

May not be the right way but i figured out that

console.log(this.refs.jobtype)(jobtype是我的情况下下拉列表的参考值)

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

给出以下结果.

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

检查它，我在"selectedIndex"属性内的状态对象内找到了有效负载索引的值(所选项目的索引号).我使用以下代码访问选定的索引:

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.

这篇关于需要获取下拉菜单的值而不使用onChange回调-(material-ui reactjs)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！