Select 组件中的占位符

【问题标题】：Placeholder in Select componentSelect 组件中的占位符
【发布时间】：2017-09-26 15:45:46
【问题描述】：

我用https://github.com/callemall/material-ui/tree/v1-beta

我可以在Select 组件中做一个占位符吗？

<Select
  value={value}
  onChange={handleChange}
  input={<Input />}
>
  <MenuItem value={''}>Any</MenuItem>
  <MenuItem value={'Male'}>Male</MenuItem>
  <MenuItem value={'Female'}>Female</MenuItem>
</Select>

谢谢

【问题讨论】：

标签： material-ui

【解决方案1】：

您应该使用 FormControl 和 InputLabel 组件。

选择组件材料页面的示例：

<FormControl className={classes.formControl}>
      <InputLabel htmlFor="age-simple">Age</InputLabel>
      <Select
        value={this.state.age}
        onChange={this.handleChange('age')}
        input={<Input id="age-simple" />}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>

希望对你有帮助:)

【讨论】：