[英]React - MUI dropdown with display value other than selected
I try to achieve a dropdown that displays multiple buttons for selection and a display value independent of the drop-down items like so:我尝试实现一个下拉菜单,该下拉菜单显示多个选择按钮和一个独立于下拉项目的显示值,如下所示:
In this example, the user can select different scales for a chart that displays two metrics.在此示例中,用户可以为显示两个指标的图表 select 不同比例。 In case both metrics have different scales, the drop-down shows "mixed" in case they both have the same scale it shall show either "linear" or "log", depending on the overall scale.
如果两个指标具有不同的比例,则下拉菜单显示“混合”,如果它们都具有相同的比例,则应显示“线性”或“对数”,具体取决于整体比例。
I tried with MUI Select component
and added a custom function to change the display value, but I get the warning:我尝试使用
MUI Select component
并添加自定义 function 来更改显示值,但我收到警告:
MUI: You have provided an out-of-range value `linear` for the select component.
Consider providing a value that matches one of the available options or ''.考虑提供与可用选项之一或“”匹配的值。
Here my code snippets:这是我的代码片段:
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>
There are 2 things I would like to suggest here:我想在这里建议两件事:
First:第一的:
Add a value
prop to each menuItem.为每个 menuItem 添加一个
value
道具。 This way they can be "matched" by the Select component as valid selections.这样,它们可以被 Select 组件“匹配”为有效选择。 Like so:
像这样:
<MenuItem value="linear">
...
</MenuItem>
<MenuItem value="log">
...
</MenuItem>
This should hopefully get rid of the warning you have mentioned in your question.这应该有望摆脱您在问题中提到的警告。
Second:第二:
The second problem you need to solve is to have "mixed" be a valid selection item.您需要解决的第二个问题是让“混合”成为有效的选择项。
A solution could be to show "mixed" when there is no selection.一个解决方案可能是在没有选择时显示“混合”。 This solution isn't ideal and not scalable to any more than 1 custom item, but might work for you.
此解决方案并不理想,并且不能扩展到 1 个以上的自定义项目,但可能对您有用。 The comments in the code should explain better what I am trying to put forth:
代码中的注释应该更好地解释我要提出的内容:
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"
>
Disclaimer: I haven't tested this code so it may have problems but I have a hunch it will work免责声明:我没有测试过这段代码,所以它可能有问题,但我有预感它会起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.