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

Question

我使用了两个select元素(Drop Down(。第一个用于项目，第二个用于颜色。颜色取决于项的值。

如果项目的值为ITEM1，则颜色可以具有颜色1、颜色2、颜色3；如果>项目TEM2则color可以具有color4、颜色5、颜色6。代码低于

<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(不更改项，即项目仍然是ITEM1(，然后将项值更改为ITEM2时，color选项中显示的初始值是color5(而不是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>