reactjs - 使用 React 和 Material-UI 控件显示选择控件的默认值

Question

我正在使用 material-ui 开发一个 React 页面。我正在检索数据从数据库中填充我的选择控件。我希望能够有一个默认值，如“选择值”。以黄色突出显示的部分只是空白。

我怎样才能做到这一点？附上存在的图像。

    <FormControl id="ron" className="form-control">
        <InputLabel htmlFor="productDescription" shrink>Product Code/Description</InputLabel>
        <Select  
            value={this.state.productCode}  
            onChange={this.handleChangeProductCode}             
            name='productcode'
        >
            <MenuItem value="">
              select the value 
            </MenuItem>
            {this.dataForProductCodeControl()}
        </Select>
    </FormControl>


     dataForProductCodeControl() {            
          if(this.props.groupedData != undefined){

            return this.props.groupedData.map((dt, i) => {
              return (
                <MenuItem key={i} value={dt.productCode}>
                    {dt.productCode} | {dt.productDescription}
                </MenuItem>
              );
            });
          }     
        }

Answer 1

您需要指定displayEmpty prop在选择上。

这是一个工作示例:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    age: ""
  });

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple" shrink>
          Age
        </InputLabel>
        <Select
          value={values.age}
          displayEmpty
          onChange={handleChange}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
        >
          <MenuItem value={""}>Select Age</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}