Question

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

这似乎不是一个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>

)

}

我也得到了

警告：未知道具onItemTouchTap，disableAutoFocus，标记上的onEscKeyDown。从元素中删除这些道具

在我点击SelectField时在控制台中，但是由于新的React版本，我看到其他人有类似问题，看起来人们认为它不应该影响我的代码（尽管它非常烦人）

Answer 1

尝试将其放入构建中：

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

确保在渲染页面之前运行该函数。

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

Answer 2

不确定您使用menuItems的原因，此属性来自旧的material-ui版本。

但它很容易修复 - 基于您的代码，您只需映射数组并返回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>

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

React Material UI SelectField菜单项未显示

2 个答案: