Reactjs react js中的依赖选择

我有两个选择元素 第一个是：

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

1.
2.
3.

第二个是：

<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.2
1.3
1.4
2.1
2.2
2.3
2.4
2.5

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

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

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

---

就这些。如何使用react钩子实现这一点。

您可以使用

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>

我们可以使用条件渲染，以便仅显示所需的选项：

{
   (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>
}

{
（firstSelectAnswer=='1'| | firstSelectAnswer=='2'）&&
{setSecondSelectAnswer（e.target.value）}value={secondSelectAnswer}>
{
第二选择选项
.filter（选项=>{return option.required==firstSelectAnswer}）
.map（（选项）=>
{option.value}
)
}
}

---

变量

firsSelectAnswer

和

secondSelectAnswer

将保存适当的值。

这将有助于感谢@FahimHoque。但vi不需要国家、州。我需要一个简单的解决方案。请阅读我的问题。这是不同的。我的意思是和国家、州的问题有点不同。谢谢你的回复。我提供的链接只是一个示例。研究它，并尝试自己实现这个想法。请不要在问题中加入诸如“高级[sic]感谢”之类的注释。看，你试过什么？我没有看到任何代码示例。

{
   (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>
}