Question

如何使用material-ui在下拉列表中显示默认值？我尝试添加displayEmpty="true"，但未做任何更改。

我希望默认选择第一个选项A，以便用户可以在UI中看到它。当前，用户应单击下拉菜单以从列表中选择一个项目。默认情况下未选择任何项目（默认情况下所选项目为空白）。

const options = [
  {label:"A",value:483.93},
  {label:"B",value:8033.86},
  {label:"C",value:1246.3}
]

<Grid item xs={true}>
  <FormControl
      className={this.props.styles.formControl}
      margin="normal">
      <InputLabel shrink htmlFor="distanceTarget-label-placeholder">
          Target:
      </InputLabel>
      <Select
        onChange={(event) => this.props.handleChange("distanceTarget", event)}
        value={this.props.state.distanceTarget}
        input={<Input name="distanceTarget" id="distanceTarget-label-placeholder" />}
        displayEmpty="true"
        name="distanceTarget"
      >
      {options && options.length && options.map((option, i) => {
          return <MenuItem value={option.value} key={i}>{option.label}</MenuItem>
      })}
      </Select>
  </FormControl>
</Grid>

更新：

这是我在评论中建议的尝试，但是我仍然遇到相同的问题：

{options && options && options((option, i) => {
  if (i===0) {
    return <MenuItem value={option.value} key={i} selected={true}>{option.label}</MenuItem>
  }
  else {
    return <MenuItem value={option.value} key={i}>{option.label}</MenuItem>
  }
})}

Answer 1

尝试这个。添加displayEmpty而不是displayEmpty =“ true”。

    <Select
    onChange={(event) => this.props.handleChange("distanceTarget", event)}
    value={this.props.state.distanceTarget}
    input={<Input name="distanceTarget" id="distanceTarget-label-placeholder" />}
    renderValue={value => ${value}`} // you should add your default value here
    name="distanceTarget"

呈现所选值。您只能在本地属性为false（默认）时使用它。（material-ui文档）

Answer 2

为了默认选择一个特定的项目，您应该初始化状态为控件的Select的值以具有该项目的值。例如，在修改后的代码版本中，我正在将Select的值初始化为options[0].value。

import React from "react";
import ReactDOM from "react-dom";
import {
  FormControl,
  Input,
  InputLabel,
  Select,
  MenuItem
} from "@material-ui/core";
const options = [
  { label: "A", value: 483.93 },
  { label: "B", value: 8033.86 },
  { label: "C", value: 1246.3 }
];

function App() {
  const [distanceTarget, setDistanceTarget] = React.useState(options[0].value);
  return (
    <FormControl margin="normal">
      <InputLabel shrink htmlFor="distanceTarget-label-placeholder">
        Target:
      </InputLabel>
      <Select
        onChange={event => setDistanceTarget(event.target.value)}
        value={distanceTarget}
        input={
          <Input name="distanceTarget" id="distanceTarget-label-placeholder" />
        }
        name="distanceTarget"
      >
        {options &&
          options.length &&
          options.map((option, i) => {
            return (
              <MenuItem value={option.value} key={i}>
                {option.label}
              </MenuItem>
            );
          })}
      </Select>
    </FormControl>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何在下拉菜单中设置默认项目？

2 个答案: