为 SelectField 显示空白菜单项的正确方法是啥(material-ui,react)

Posted

技术标签:

【中文标题】为 SelectField 显示空白菜单项的正确方法是啥(material-ui,react)【英文标题】:What is the proper way to show blank menu item for SelectField (material-ui, react)为 SelectField 显示空白菜单项的正确方法是什么(material-ui,react) 【发布时间】:2016-12-25 01:08:42 【问题描述】:

我使用最新 0.15.4 版本的 material-ui 框架中的 select-field 和 15.4.0 版本的 react。我尝试将空白菜单项添加到选择字段,以便在单击它时能够取消选择“下拉”字段的值。当我尝试以类似的方式添加它时

<MenuItem value="" primaryText="" />

它不会出现在项目的下拉列表中。在 SelectField 中添加选择空白字段功能的正确方法是什么?

【问题讨论】:

也许你应该使用Divider 【参考方案1】:

将 MenuItem 值设置为 "" 并将 primaryText 设置为 "" 将使其在选项中不可见。

我建议你这样做:

<SelectField value=this.state.some_key>
    <MenuItem value="Choice1" primaryText="Choice1" />
    <MenuItem value="Select" primaryText="Select" />
</SelectField>

然后在 onChange:

onChange = (event, index, value) => 
    if(value === "Select") 
        this.setState(some_key = "")
    

单击“选择”后,该字段将显示空白输入。

【讨论】:

好的,谢谢。它肯定会起作用,而且我已经使用这种方式,但如果我不想显示没有“Choice1”的空 MenuItem,它看起来很棘手。

以上是关于为 SelectField 显示空白菜单项的正确方法是啥(material-ui,react)的主要内容,如果未能解决你的问题,请参考以下文章

突出显示当前所选导航菜单项的背景

angularjs select通过动态加载option有空白项的处理方法-

xml 自定义操作提供程序,仅显示菜单项的子菜单

如何在 wpf 的分层数据模板中显示树视图项的上下文菜单

cdr x4 win10菜单栏空白不显示

react-md SelectField onChange 没有正确更新