React - MUI 下拉菜单，显示值不是选定的

Question

我尝试实现一个下拉菜单，该下拉菜单显示多个选择按钮和一个独立于下拉项目的显示值，如下所示：

在此示例中，用户可以为显示两个指标的图表 select 不同比例。 如果两个指标具有不同的比例，则下拉菜单显示“混合”，如果它们都具有相同的比例，则应显示“线性”或“对数”，具体取决于整体比例。

我尝试使用MUI Select component并添加自定义 function 来更改显示值，但我收到警告：

MUI: You have provided an out-of-range value `linear` for the select component.

考虑提供与可用选项之一或“”匹配的值。

这是我的代码片段：

const displayMetricScale = () => {
    return (scale_metric1===scale_metric2) ? (scale_metric1) : "mixed";
};

<Select
    label="Scale"
    value={displayMetricScale()}
    defaultValue="mixed"
    renderValue={(p) => p}
>
    <MenuItem>
    <FormControl>
        <FormLabel>Metric 1</FormLabel>
        <Button onClick={changeScaleLin} >
            Linear
        </Button>
        <Button onClick={changeScaleLog} >
            Logarithmic
        </Button>
    </FormControl>
    </MenuItem>
    <MenuItem>
    <FormControl>
        <FormLabel>Metric 2</FormLabel>
        <Button onClick={changeScaleLin} >
            Linear
        </Button>
        <Button onClick={changeScaleLog} >
            Logarithmic
        </Button>
    </FormControl>
    </MenuItem>
</Select>

Answer 1

我想在这里建议两件事：

第一的：

为每个 menuItem 添加一个value道具。 这样，它们可以被 Select 组件“匹配”为有效选择。 像这样：

<MenuItem value="linear">
  ... 
</MenuItem>
<MenuItem value="log">
  ...
</MenuItem>

这应该有望摆脱您在问题中提到的警告。

第二：

您需要解决的第二个问题是让“混合”成为有效的选择项。

一个解决方案可能是在没有选择时显示“混合”。 此解决方案并不理想，并且不能扩展到 1 个以上的自定义项目，但可能对您有用。 代码中的注释应该更好地解释我要提出的内容：

const displayMetricScale = () => {
  // Return empty when you want to show "mixed"
  return (scale_metric1===scale_metric2) ? (scale_metric1) : "";
};

<Select
  label="Scale"
  value={displayMetricScale()}
  displayEmpty=true // To be able to show a value when value is empty
  renderValue={(p) => p === "" ? "mixed" : p} // If p is empty, show "mixed"
>

免责声明：我没有测试过这段代码，所以它可能有问题，但我有预感它会起作用