两个选择元素(下拉菜单)和一个条件选项。

Question

我使用了两个选择元素（Drop Down）。第一个是用于 项，第二个是为 颜色.The 颜色 取决于 项.

如果 项 是 第1项 然后 颜色 可以有 color1, color2, color3 和 如果 项 是 第2项 然后 颜色 可以有 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>

当我改变 项的值，我手动更新 颜色 到各自的第一个选项 颜色.

但这里有一个问题。当我改变 颜色 选择 颜色2(不改变 项 即 项 仍是 第1项 )，然后改变 项 到 第2项，初始值显示在 颜色 选项是 颜色5 (不是 颜色4 因为我希望选项的默认值应该在那里），这在我的Web应用程序中产生了一个错误。如何解决这个问题？或者有其他的方法来做同样的事情。THANK YOU in advance.

你可以模拟上面的情况 此处

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>