选择默认值中的 MUI 对象不显示，但在选择对象时显示

Question

由于代码显示选项默认有一个“chosenValue”，但是我必须将其更改为默认在下拉列表中显示的内容，否则下拉列表为空。如何才能使页面加载时默认值显示“chosenValue”？这是一个codesandbok示例：https://codesandbox.io/s/practical-noether-dwt52t? file=/src/App.js:0-1421

import "./styles.css";
import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  OutlinedInput
} from "@mui/material";
import { useState } from "react";
export default function App() {
  const [options, setOptions] = useState({
    chosenValue: {
      label: "apple",
      color: "green"
    },
    aviableValues: [
      { label: "apple", color: "red" },
      { label: "Orange", color: "Orange" },
      { label: "pear", color: "green" }
    ]
  });
  const handleContentChange = (event) => {
    setOptions((prevState) => ({
      ...prevState,
      chosenValue: event.target.value
    }));
  };
  return (
    <>
      {options.chosenValue && (
        <FormControl sx={{ mt: 2 }}>
          <InputLabel id="demo-simple-select-helper-label">Fruits</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={options.chosenValue}
            onChange={(e) => handleContentChange(e)}
            input={<OutlinedInput label={options.chosenValue.label} />}
            fullWidth
          >
            {options.aviableValues.map((item) => {
              return (
                <MenuItem value={item} key={item}>
                  {item.label}
                </MenuItem>
              );
            })}
          </Select>
        </FormControl>
      )}
      {options.chosenValue && <p>{options.chosenValue.label}</p>}
    </>
  );
}

Answer 1

代码沙盒中的工作示例

我已经在代码沙箱中分叉了您的示例，并使用有效的实现对其进行了修改。我还提供了一个Autocomplete替代方案。

https://codesandbox.io/s/musing-dew-58frco

为什么所选选项不显示

正如 Ivan 所说，组件未显示所选值的原因Select是所选值与选项中的值是不同的对象，并且组件Select要求对象严格相等 ( ===)。

例如，尽管这些对象看起来相同，但它们将无法通过严格的相等检查。您可以在控制台中测试此示例，这将导致false.

{ fruit: "apple" } === { fruit: "apple" } 

如何使用选择

最简单的使用方法Select是将您的值设置为字符串，并且每个选项都有一个标签和值键（都是字符串）。标签是屏幕上显示的内容，值是选择选项时将选择的内容。

例如，对于您的选择，您可以有：

const options = [
  { label: "Apple", color: "red", value: "apple" },
  { label: "Orange", color: "orange", value: "orange" },
  { label: "Pear", color: "green", value: "pear" }
];

您可以将其作为状态之外的变量，而不是将选项存储在状态中，因为它不会改变。

您只需要保留所选值的状态，我将其称为fruit。apple是水果的初始值。

const [fruit, setFruit] = useState("apple");

在您的Select组件中，分配fruit给valueprop 并确保将value每个项目的 提供给value的 prop MenuItem：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={fruit} // this is coming from state
  onChange={(e) => setFruit(e.target.value)} // we can setFruit directly here
  input={<OutlinedInput label="Hello" />}
  fullWidth
>
  {options.map((item) => {
    return (
      <MenuItem value={item.value} key={item.value}>
        {item.label}
      </MenuItem>
    );
  })}
</Select>

我们可以直接在 prop 中设置Fruit，而不是使用单独的handleChange 函数onChange。

这defaultValue不是必需的，并且仅应在组件不受控制时使用。这是来自Material UI 文档：

默认值。当组件不受控制时使用。

我们的组件是受控组件，因为我们从状态（fruit）提供价值并处理更改（setFruit）。

另一种方法是使用自动完成 - 如果您希望将所选项目作为对象

在上面的解释中，我使用字符串值，即apple,orange和pear。如果您希望选择的值是对象，例如{ label: "Apple", color: "red", value: "apple" }，那么您可以使用Material UI 的 Autocomplete。

我们有相同的选择：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={fruit} // this is coming from state
  onChange={(e) => setFruit(e.target.value)} // we can setFruit directly here
  input={<OutlinedInput label="Hello" />}
  fullWidth
>
  {options.map((item) => {
    return (
      <MenuItem value={item.value} key={item.value}>
        {item.label}
      </MenuItem>
    );
  })}
</Select>

但我们的状态不同：

const options = [
  { label: "Apple", color: "red", value: "apple" },
  { label: "Orange", color: "orange", value: "orange" },
  { label: "Pear", color: "green", value: "pear" }
];

请注意，此处的初始状态必须与其中一个选项完全匹配。

该Autocomplete组件提供了一个isOptionEqualToValueprop，它将我们选择的值与我们可以选择的选项进行比较，以确定应该渲染哪个。我们想要比较value所选项目和选项项目的键。如果相等，则显示匹配的选项。例如，如果选定的项目是，{ label: "Apple", color: "red", value: "apple" }并且有一个选项也是{ label: "Apple", color: "red", value: "apple" }，因为它们的值相等（“apple”===“apple”为 true），那么“Apple”将显示为选定的。

现在将其与Autocomplete组件放在一起：

<Autocomplete
  options={options}
  value={fruit}
  isOptionEqualToValue={(option, value) => option.value === value.value}
  onChange={(event, newValue) => {
    setFruit(newValue);
  }}
  renderInput={(params) => (
    <TextField {...params} label="Fruits" variant="standard" />
  )}
/>;

希望这可以帮助。