如何处理具有 2 个相同值的材料 ui 的选择

Question

我正在尝试实现一个功能，用户可以在其中输入他的电话号码和国家代码。我使用材料ui的选择组件作为国家代码的下拉菜单，这样用户就可以从下拉菜单中选择他的国家代码。问题是usa&canada具有相同的国家代码，即+1。我也在使用一个npm包显示正确的国家国旗。这是我的代码：-

const checkCountryFlag = (code) => {
switch (code) {
case "+91":
return "inr";
case "+1":
return "usd";
case "+44":
return "gbp";
case "+971":
return "aed";
case "+1-c":
return "cad";
}
};
<Select
value={countryCode}
label="Country code"
onChange={(e) => setCountryCode(e.target.value)}
renderValue={() => (
<div style={{ padding: "10px" }}>
<div
class={`currency-flag currency-flag-${checkCountryFlag(
countryCode
)}`}
style={{ paddingRight: "5px" }}
></div>
<span style={{ paddingLeft: "20px" }}>{countryCode}</span>
</div>
)}
>
<MenuItem value={`+91`}>
<div class={`currency-flag currency-flag-inr`}></div>
+91
</MenuItem>
<MenuItem value={`+1`}>
<div class={`currency-flag currency-flag-usd`}></div>
+1
</MenuItem>
<MenuItem value={`+44`}>
<div class={`currency-flag currency-flag-gbp`}></div>
+44
</MenuItem>
<MenuItem value={`+971`}>
<div class={`currency-flag currency-flag-aed`}></div>
+971
</MenuItem>
<MenuItem value={`+1`}>
<div class={`currency-flag currency-flag-cad`}></div>
+1
</MenuItem>
</Select>

正如你在上面看到的。。。加拿大&美国有相同的国家代码，所以我选择美国或加拿大，我的开关盒将始终返回usa。

我试图在MenuItem中给代表加拿大的value道具一个不同的值，即'+1-c'，然后在选择我的Select时显示+1-c，这是显而易见的。

我还试着这样做选择组件的检查值道具：-

<Select
value={countryCode !== "+1-c" ? countryCode : "+1"}
label="Country code"
onChange={(e) => setCountryCode(e.target.value)}
renderValue={() => (
<div style={{ padding: "10px" }}>
<div
class={`currency-flag currency-flag-${checkCountryFlag(
countryCode
)}`}
style={{ paddingRight: "5px" }}
></div>
<span style={{ paddingLeft: "20px" }}>
{countryCode !== "+1-c" ? countryCode : "+1"}
</span>
</div>
)}
>
<MenuItem.....
</Select>

在这种情况下。。。当我选择加拿大时。。。然后我无法再次选择美国

任何关于我如何实现的建议

Answer 1

一个可能的解决方案是，不要将国家代码设置为值，只设置国家名称。

选择后，从所选国家/地区提取国家/地区代码。

例如。

如果用户选择加拿大。您只需在州中设置加拿大，然后从查找功能中获取加拿大的国家代码。

[{name: "Canada", code: "+1"}, {name: "USA", code: "+1"}].find(c => c.name === selectedCountryName).code