如何设置下拉菜单中的默认项？答案

【问题标题】：How to set the default item in the drop-down menu?如何设置下拉菜单中的默认项？
【发布时间】：2019-08-04 16:21:46
【问题描述】：

如何使用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>

更新：

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

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

【问题讨论】：

为要默认选中的元素设置selected = true
@CodeManiac：我如何在map 中做到这一点？类似if i==0 then...?
是的，使用 if...else 并根据您的要求返回带有和不带有 selected 属性的 MenuItem，即 i == 0 ？ <MenuItem selected={true}... : <MenuItem value={option.value} key={.......
@CodeManiac：我试过这种方法，但没有出现默认值。请参阅我的代码更新。

标签： javascript reactjs material-ui

【解决方案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"

渲染选定的值。您只能在 native 属性为 false（默认）时使用它。 (material-ui 文档)

【讨论】：

在我的情况下，该值与显示的标签不同。我想显示A，而对应的值为483.93。如果我使用你的方法，那么我会看到483.93 而不是A。还是我错过了什么？有没有办法只指定selected={true}？令人惊讶的是，它对我不起作用。
我真的不知道，但应该可以。在您
您在答案中发布的代码有效，但问题是它显示了值，例如483.93，但不是标签，例如“一种”。如果我写renderValue={value => "A"}，那么显然我会得到错误的非数字值。关于displayEmpty，我放弃了={true}，但是没有任何效果。
所以“A”似乎是一个占位符，对吧？在材质 UI 中有一个带有 placehder 的组件示例。它调用占位符。核实。在文档中。所以试试这个

【解决方案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);

【讨论】：