react js中的依赖选择

Question

我有两个select元素第一个是：

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

第二个是：

<select>
<option>1.1</option>
<option>1.2</option>
<option>1.3</option>
<option>1.4</option>
<option>2.1</option>
<option>2.2</option>
<option>2.3</option>
<option>2.4</option>
<option>2.5</option>
</select>

第二个将默认隐藏。当我从第一个选项中选择一个选项时，如果该选项在第二个选项中有任何子项，则第二个将显示，并且只有与第一个所选选项相关的选项才会在第二选择元素中可见。

更多详细信息：我从第一个选择元素中选择了1。则第二选择元素将显示，并且第二选择元件将仅显示与1相关的选项，例如，对于第二选择选项，只有1.1、1.2、1.3、1.4选项可见。

如果我从第一个选择选项中选择了3，那么第二个选择元素将被隐藏，因为第二个元素没有与3相关的项目。

仅此而已。我如何使用react钩子来实现这一点。

Answer 1

您可以使用useState来创建组件变量。

[firstSelectAnswer, setFirstSelectAnswer] = useState('1');

该变量将保存第一个选择框中的选定值，例如默认情况下为1；我们将在选择时绑定更改事件，或在选项时绑定单击事件，以接收新选择的值。

firstSelectOptions = ["1", "2", "3"]
...
<select onChange={(e) => {setFirstSelectAnswer(e.target.value)}} value={firstSelectAnswer}>
{
firstSelectOptions.map((option) => <option key={option} value={option}>{option}</option>)
}
</select>

我们可以使用secondSelectAnswer变量来保存第二个选择框中的答案。

[secondSelectAnswer, setSecondSelectAnswer] = useState();
secondSelectOptions = [
{key: "1", value: "1.1"},
{key: "1", value: "1.2"},
{key: "1", value: "1.3"},
{key: "1", value: "1.4"},
{key: "2", value: "2.1"},
{key: "2", value: "2.2"},
{key: "2", value: "2.3"},
{key: "2", value: "2.4"},
{key: "2", value: "2.5"}
]
...

我们可以使用条件渲染来只显示所需的选项：

{
(firstSelectAnswer == '1' || firstSelectAnswer == '2') &&  
<select onChange={(e) => {setSecondSelectAnswer(e.target.value)}} value={secondSelectAnswer}>
{
secondSelectOptions
.filter(option => {return option.required == firstSelectAnswer})
.map((option) => 
<option 
key={option.value} 
value={option.value}>
{option.value}
</option>)
}
</select>
}

变量firsSelectAnswer和secondSelectAnswer将保持适当的值。