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

Question

我在一个测试项目中使用了Material UI的v1.0.0-beta.24，“Dropdown”菜单的工作方式与之前的版本不同，所以我想要做的就是在Select组件中设置一个placeholer。

在我之前版本的例子中，我有这个：

<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

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

  <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 2

我不知道如何在评论中加入代码......

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，但我不敢相信它们不再支持占位符文本了。