Question

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

我该如何实现？附有存在的图像。

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

https://issuetracker.google.com/issues/119271605

Answer 1

您可以添加一个禁用的无价值物品，如下所示：

<MenuItem value="" disabled>
    Placeholder
</MenuItem>

但是该项目将显示为一个选项。参见https://material-ui.com/components/selects/#simple-select

Answer 2

您需要在Select上指定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>
  );
}

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

2 个答案: