javascript - Set a placeholder value to Select component Material UI v1.0.0-beta.24 - Stack Overflow

admin管理员组

文章数量:1340526

I'm using in a test project the v1.0.0-beta.24 from Material UI, the "Dropdown" menus work different from the previous version so what I want to do is to set like a placeholer in the Select ponent.

In my example with a previous versión I had this:

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

So in the new version the primaryText property is not supported, this is my code:

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);

  }
  ponentDidMount() {
    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>
    );
  }
}

So any help on this would be nice.

Regards.

I'm using in a test project the v1.0.0-beta.24 from Material UI, the "Dropdown" menus work different from the previous version so what I want to do is to set like a placeholer in the Select ponent.

In my example with a previous versión I had this:

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

So in the new version the primaryText property is not supported, this is my code:

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);

  }
  ponentDidMount() {
    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>
    );
  }
}

So any help on this would be nice.

Regards.

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Dec 18, 2017 at 22:05 kennechukennechu 1,42299 gold badges2525 silver badges3737 bronze badges 3

• Have this.state.divisionState = 'your placeholder text'. Or create a custom this.state.placeholderText: 'example input', and conditionally use it if DivisionData is empty – Gavin Thomas Commented Dec 18, 2017 at 23:14
• Hi, thanks for your time. The thing is that is not empty, the select is populated with a Web Service that is loaded when I run the app... – kennechu Commented Dec 19, 2017 at 0:41
• Above your .map, but still inside that function hard code a single menu item to be used as a placeholder... <MenuItem key={333} value={this.state.placeholder}> 'placeholder text' </MenuItem> – Gavin Thomas Commented Dec 19, 2017 at 0:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

just provide the following attributes in Select

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

replace the value with your variable.

You're using InputLabel with htmlFor="name-multiple", but there is no input with that name. You need to provide one by setting the input prop on Select:

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

You can see this in action on the Simple Selects demo for the Select ponent.

I don't know how to put code in the ments...

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>
    );
  });
}

does this work? its super hacky, but I can't believe they don't support placeholder text anymore.

you can use id on InputLabel and labelId on Select. refer doc https://mui./material-ui/react-select/

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

本文标签： javascriptSet a placeholder value to Select component Material UI v100beta24Stack Overflow