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"
>

免責聲明：我沒有測試過這段代碼，所以它可能有問題，但我有預感它會起作用