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

Question

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

在我以前版本的示例中，我有这个：

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

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

import React from 'react';
import Select from 'material-ui/Select';
import {MenuItem, MenuIcon} from 'material-ui/Menu';
import {DatePicker} from 'material-ui-pickers';
import { FormControl } from 'material-ui/Form';
import { InputLabel } from 'material-ui/Input';


import cr from '../styles/general.css';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

      DivisionData: [],
      DivisionState: '',

    };
    this.renderDivisionOptions = this.renderDivisionOptions.bind(this);
    this.handleChangeDivision = this.handleChangeDivision.bind(this);

  }
  componentDidMount() {
    const divisionWS = 'http://localhost:8080/services/Divisions/getAll';

    fetch(divisionWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          DivisionData: findResponse.divisions,
        });
      });

  }
  handleChangeDivision(event, index, value) {
    this.setState({ DivisionState: event.target.value});

  }
  renderDivisionOptions() {
    return this.state.DivisionData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.divDeptShrtDesc}>
          {dt.divDeptShrtDesc}

        </MenuItem>
      );
    });
  }
  render() {
    return (

      <div className={cr.container}>
        <div className={cr.containerOfContainers}>
          <div className={cr.inputContainer}>
            <div className={cr.rows}>
              <div>
                <div>
                  <FormControl>
                    <InputLabel htmlFor="name-multiple">Division</InputLabel>
                      <Select
                        value={this.state.DivisionState}
                        onChange={this.handleChangeDivision}
                        autoWidth={false}
                      >
                        {this.renderDivisionOptions()}
                      </Select>
                  </FormControl>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    );
  }
}

所以在这方面的任何帮助都会很好。

问候。

Answer 1

只需在 Select 中提供以下属性

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

用你的变量替换值。

Answer 2

您正在使用带有htmlFor="name-multiple" 的 InputLabel，但没有使用该名称的输入。您需要通过在 Select 上设置 input 属性来提供一个：

  <FormControl>
    <InputLabel htmlFor="name-multiple">Division</InputLabel>
      <Select
        value={this.state.DivisionState}
        onChange={this.handleChangeDivision}
        autoWidth={false}
        input={<Input id="name-multiple" />}
      >
        {this.renderDivisionOptions()}
      </Select>
  </FormControl>

您可以在 Simple Selects demo 的 Select 组件上看到这一点。

Answer 3

我不知道如何将代码放入 cmets...

renderDivisionOptions() {
  <MenuItem
    key={1}
    value={this.state.placeholder}>
      'placeholdertext'
  </MenuItem>

  return this.state.DivisionData.map((dt, i) => {
    return (
      <MenuItem
        key={i}
        value={dt.divDeptShrtDesc}>
          {dt.divDeptShrtDesc}
      </MenuItem>
    );
  });
}

这行得通吗？它超级 hacky，但我不敢相信他们不再支持占位符文本了。