将占位符值设置为选择组件 Material UI v1.0.0-beta.24

Question

我在测试项目中使用 Material UI 中的 v1.0.0-beta.24，“下拉”菜单的工作方式与以前的版本不同，所以我想要做的是在 Select 组件中设置像占位符一样。

\n\n

在我之前的 versi\xc3\xb3n 示例中，我有以下内容：

\n\n

<DropDownMenu\n  value={this.state.DivisionState}\n  onChange={this.handleChangeDivision}>\n  <MenuItem value={\'\'} primaryText={\'Select division\'} />\n  {this.renderDivisionOptions()}\n</DropDownMenu>\n

\n\n

所以在新版本中不支持primaryText属性，这是我的代码：

\n\n

import React from \'react\';\nimport Select from \'material-ui/Select\';\nimport {MenuItem, MenuIcon} from \'material-ui/Menu\';\nimport {DatePicker} from \'material-ui-pickers\';\nimport { FormControl } from \'material-ui/Form\';\nimport { InputLabel } from \'material-ui/Input\';\n\n\nimport cr from \'../styles/general.css\';\n\nexport default class Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n\n      DivisionData: [],\n      DivisionState: \'\',\n\n    };\n    this.renderDivisionOptions = this.renderDivisionOptions.bind(this);\n    this.handleChangeDivision = this.handleChangeDivision.bind(this);\n\n  }\n  componentDidMount() {\n    const divisionWS = \'http://localhost:8080/services/Divisions/getAll\';\n\n    fetch(divisionWS)\n      .then(Response => Response.json())\n      .then(findResponse => {\n        console.log(findResponse);\n\n        this.setState({\n          DivisionData: findResponse.divisions,\n        });\n      });\n\n  }\n  handleChangeDivision(event, index, value) {\n    this.setState({ DivisionState: event.target.value});\n\n  }\n  renderDivisionOptions() {\n    return this.state.DivisionData.map((dt, i) => {\n      return (\n        <MenuItem\n          key={i}\n          value={dt.divDeptShrtDesc}>\n          {dt.divDeptShrtDesc}\n\n        </MenuItem>\n      );\n    });\n  }\n  render() {\n    return (\n\n      <div className={cr.container}>\n        <div className={cr.containerOfContainers}>\n          <div className={cr.inputContainer}>\n            <div className={cr.rows}>\n              <div>\n                <div>\n                  <FormControl>\n                    <InputLabel htmlFor="name-multiple">Division</InputLabel>\n                      <Select\n                        value={this.state.DivisionState}\n                        onChange={this.handleChangeDivision}\n                        autoWidth={false}\n                      >\n                        {this.renderDivisionOptions()}\n                      </Select>\n                  </FormControl>\n                </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n    );\n  }\n}\n

\n\n

所以对此的任何帮助都会很好。

\n\n

问候。

\n

Answer 1

只需在 Select 中提供以下属性

displayEmpty
renderValue={value !== "" ? undefined : () => "placeholder text"}

用您的变量替换该值。