React Material UI SelectField 菜单项未出现

Question

使用Material-UI 0.15.1, React 15.2.0 当我单击 SelectField 下拉菜单时，出现一个空的下拉菜单，没有出现菜单选项。当我在 SelectField 中使用硬编码的 MenuItems 时，我看到完整的菜单没有问题。

这似乎不是 injectTapEventPlugin，因为我正在导入它并调用它。我的代码如下：

render() {
var divStyle = {
  fontSize: 16
};

var mymenuItems = [
{ payload: '1', text: 'one' },
{ payload: '2', text: 'two' },
{ payload: '3', text: 'three' },
{ payload: '4', text: 'four' },
{ payload: '5', text: 'five' },
];


return (
  <div style={divStyle}>
    <SelectField
        value={this.state.selected}
        onChange={this._onSelect}
        floatingLabelText="Product"
        menuItems={mymenuItems}>
    </SelectField>      
  </div>

)

}

我也收到了

Warning: Unknown props onItemTouchTap, disableAutoFocus, onEscKeyDown on tag. Remove these props from the element

在控制台中，当我单击 SelectField 时，但我看到其他人由于新的 React 版本而遇到了类似的问题，而且似乎人们认为它不应该影响我的代码（尽管这很烦人）

Answer 1

不确定您为什么使用 menuItems，这个属性来自旧的 material-ui 版本。

但它很容易修复 - 根据您的代码，您可以通过数组和 return MenuItem 元素进行映射。示例：

<SelectField
    value={this.state.selected}
    onChange={this._onSelect}
    floatingLabelText="Product">

    {mymenuItems.map(x => <MenuItem key={x.payload} value={x.payload} primaryText={x.text} />)}
</SelectField>

我建议您查看 material-ui 文档中的示例 http://www.material-ui.com/#/components/select-field

Answer 2

尝试将其放入您的构建中：

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

确保函数是运行，然后再将任何内容呈现到页面。

参考：https://github.com/callemall/material-ui/issues/1011

React Material UI SelectField 菜单项未出现

React Material UI SelectField menu items not appearing

reactjs

material-ui