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

Question

我使用了两个 select 元素（下拉）。第一个用于 item，第二个用于 color。 color 取决于 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的值更新为它们各自的第一个选项颜色。

但是问题来了。当我将 color 选项更改为 color 2（而不更改 item 即 item 仍然是 ITEM1 ) 然后将 item 的值更改为 ITEM2, color 选项中显示的初始值是 color 5 （不是 color4 因为我期待默认值该选项应该在那里）这会在我的网络应用程序中创建一个错误。如何解决？或者还有另一种方法可以做到这一点。提前致谢。

可以模拟上面的here

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>

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

Two Select elements(drop downs) with one conditional options

html

html-select

drop-down-menu

reactjs

react-hooks