react js中的依赖选择答案

【问题标题】：dependent select in react jsreact js中的依赖选择
【发布时间】：2026-01-16 07:10:02
【问题描述】：

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


<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 相关的项目。

就是这样。我如何使用反应钩子来实现这一点。

【问题讨论】：

roytuts.com/cascading-or-dependent-dropdown-using-react-js 这会有所帮助
感谢@FahimHoque。但 vi 不需要国家、州。我需要一个简单的解决方案。请阅读我的问题。这是不同的。我的意思是有点不同，然后国家，州问题。嗯，非常感谢您的热情回复。
我提供的链接只是一个示例。研究它并尝试自己实现这个想法
请不要在问题中包含“thanks in advanced[sic]”之类的注释。见no thanks。
你试过什么？我没有看到任何代码示例。

标签： reactjs react-hooks

【解决方案1】：

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

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

此变量将保存从第一个选择框中选择的值，例如默认为 1；我们将绑定 select 上的 change 事件或 option 上的 click 事件，以便接收新选择的值。

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 将保持适当的值。

【讨论】：