时间戳

首页 > 解决方案 > 如何使用 2 个相同的值处理材质 ui 的选择

reactjs - 如何使用 2 个相同的值处理材质 ui 的选择

问题描述

我正在尝试实现一个功能，用户可以在其中输入他的电话号码和他的国家代码。我正在使用 material-ui 的 Select 组件作为国家代码的下拉菜单，以便用户可以从下拉菜单中选择他的国家代码。问题是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。

我试图value在代表加拿大的 MenuItem 中为 prop 赋予不同的值，即'+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>

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

任何关于我如何实现这一目标的建议

标签： reactjsmaterial-ui

解决方案

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

并在选择后，从所选国家中提取国家代码。

例如。

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

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

推荐阅读