Question

我使用的是Material-ui的0.20.1版本，当我在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;

我该如何解决这个问题？

Answer 1

MenuItem组件将所有其他道具放在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>
    );
  }
}

从Material-ui MenuItem使用SelectField时未显示

1 个答案: