两个 Select 元素（下拉菜单）和一个条件选项

Question

我使用了两个 select 元素（下拉）。 第一个用于项目，第二个用于颜色。 颜色取决于item的值。

如果item的值为ITEM1那么color可以有color1, color2, color3并且如果item的值为ITEM2那么color可以有color4,color5,color6 。 代码如下

 <select name="item" onChange={changeItem}>
    <option value="ITEM1"> Item1 </option>
    <option value="ITEM2"> Item2 </option>
  </select>
  <select name="color" onChange={changeInputs}>
    {inputs.item === "ITEM1" ? (
      <Fragment>
        <option selected value="color1">Color 1</option>
        <option value="Color2"> Color 2 </option>
        <option value="Color3"> Color 3 </option>
      </Fragment>
    ) : (
      <Fragment>
        <option selected value="color4">Color 4 </option>
        <option value="Color5"> Color 5 </option>
        <option value="Color6"> Color 6 </option>
      </Fragment>
    )}
  </select>

当我更改item的值时，我手动将color的值更新为它们各自颜色的第一个选项。

但是这里有一个问题。 当我将颜色选项更改为颜色 2 （不更改项目，即项目仍然是ITEM1 ）然后将项目的值更改为ITEM2时，颜色选项中显示的初始值是颜色 5 （不是color4 ，因为我期待默认值该选项应该在那里），这会在我的 web 应用程序中创建一个错误。 如何解决？ 或者还有另一种方法可以做到这一点。 先感谢您。

您可以在此处模拟上述内容

Answer 1

哦，我认为这是因为您不使用选项中的keys 。 所以你可以这样写

          <Fragment>
            <option selected key="color1" value="color1">
              Color 1
            </option>
            <option key="Color2" value="Color2">
              Color 2
            </option>
            <option key="Color3" value="Color3">
            </option>
          </Fragment>
        ) : (
          <Fragment>
            <option selected key="color4" value="color4">
              Color 4
            </option>
            <option key="Color5" value="Color5">
              Color 5
            </option>
            <option key="Color6" value="Color6">
              Color 6
            </option>
          </Fragment>