需要在不使用 onChange 回调的情况下获取下拉菜单的值 - (material-ui reactjs)

Posted 2023-02-22

【中文标题】需要在不使用 onChange 回调的情况下获取下拉菜单的值 - (material-ui reactjs)

【英文标题】：need to get value of dropdown menu without using onChange callback - (material-ui reactjs)

【发布时间】：2015-12-14 11:54:55

【问题描述】：

我正在使用材料 UI dropdown component 并尝试仅在用户填写所有表单并提交表单时运行回调函数。在回调函数上，我打算收集所有表单字段并生成 url 以调用 api。

我的问题是我不能像#560 中所述的解决方案那样使用 onChange，因为我只想在用户单击提交按钮时收集所有详细信息。奇怪的是，目前，我能够获得所有其他表单元素的值，如滑块、使用 material-ui 但只有下拉菜单的文本字段似乎不起作用。

我的回调函数：

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 不是函数”

这是我的下拉组件：

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

【参考方案1】：

可能不是正确的方法，但我想通了

console.log(this.refs.jobtype)（在我的例子中，jobtype 是下拉列表的 refs 值）

给出了以下结果。

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

检查它，我在“selectedIndex”属性中的状态对象内找到了有效负载索引的值（所选项目的索引号）。我使用以下代码访问选定的索引：

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

如果有更好的方法，请提出建议。