在使用 Material-ui MenuItem 中的 SelectField 时未显示答案

【问题标题】：On using SelectField from Material-ui MenuItem are not showing在使用 Material-ui MenuItem 中的 SelectField 时未显示
【发布时间】：2019-01-11 20:44:16
【问题描述】：

我使用的是 0.20.1 版本的 material-ui，当我在 SelectField 中使用 Menuitem 时，它会显示项目，当我单击项目时会出现错误

React 无法识别 DOM 元素上的 primaryText 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 primarytext。如果您不小心从父组件中传递了它，请将其从 DOM 元素中移除。

这是我的搜索组件代码 -

import React from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from '@material-ui/core/MenuItem';
class Search extends React.Component {
  state = {
    searchText: '',
    amount: 15,
  }
  render() {
    return(
      <div>
      <SelectField
         name="amount"
         floatingLabelText="Amount"
         value={this.state.amount}
       >
       <MenuItem value={5} primaryText="5" />
       <MenuItem value={10} primaryText="10" />
       <MenuItem value={15} primaryText="15" />
       <MenuItem value={30} primaryText="30" />
       <MenuItem value={50} primaryText="50" />
       </SelectField>
      </div>
    );
  }
}
export default Search;

我该如何解决这个问题？？

【问题讨论】：

你确定它应该有一个primaryText 属性，而不仅仅是<MenuItem value={5}> 5 </MenuItem>？
排除了primeryText道具，它起作用了。谢谢:)

标签： reactjs material-ui

【解决方案1】：

MenuItem 组件将所有额外的 props 放在 DOM 节点上，primaryText 不是可识别的属性。

您可以完全删除 primaryText 属性。

class Search extends React.Component {
  state = {
    searchText: '',
    amount: 15,
  }
  render() {
    return(
      <div>
        <SelectField
          name="amount"
          floatingLabelText="Amount"
          value={this.state.amount}
        >
          <MenuItem value={5} />
          <MenuItem value={10} />
          <MenuItem value={15} />
          <MenuItem value={30} />
          <MenuItem value={50} />
        </SelectField>
      </div>
    );
  }
}

【讨论】：