如何在ReactJS中实现三级联动的分步导航/筛选表单？

嘿，你已经搞定二级联动了，这步走得很稳！要实现第三级联动其实和第二级的思路是相通的，只是多了一层依赖关系而已。我给你梳理下具体的实现步骤和注意点：

1. 补充状态管理 #

首先你需要在父组件（比如FilterForm）里新增两个状态：一个存第三级的选中值，另一个存第三级的可选列表：

const [selectedThird, setSelectedThird] = useState('');
const [thirdOptions, setThirdOptions] = useState([]);

2. 监听第二级的选择变化 #

当第二级选项被选中时，你要根据当前第一级+第二级的选中值，去筛选出对应的第三级选项，同时重置第三级的选中状态（避免之前的无效选中残留）。

假设你的数据源是嵌套结构（比如{ 一级值: { 二级值: [三级选项数组] } }），那在第二级的选择事件里可以这么写：

const handleSecondSelect = (selectedSecondValue) => {
  setSelectedSecond(selectedSecondValue);
  // 根据前两级的选中值获取第三级选项
  const matchedThirdOptions = yourDataSource[selectedFirst][selectedSecondValue] || [];
  setThirdOptions(matchedThirdOptions);
  // 重置第三级选中值
  setSelectedThird('');
};

3. 渲染第三级列表 #

和前两级的渲染逻辑一致，遍历thirdOptions生成<li>元素，绑定点击事件来更新第三级的选中状态：

<ul className="third-tier-list">
  {thirdOptions.map(option => (
    <li
      key={option.value}
      className={selectedThird === option.value ? 'active' : ''}
      onClick={() => setSelectedThird(option.value)}
    >
      {option.label}
    </li>
  ))}
</ul>

4. 优化建议 #

• 数据结构优化：如果你的数据源还不是嵌套结构，建议整理成方便快速查找的格式，比如：

  const tieredData = {
    "电子设备": {
      "手机": ["iPhone", "华为", "小米"],
      "电脑": ["MacBook", "联想拯救者", "戴尔XPS"]
    },
    "家居用品": {
      "厨具": ["炒锅", "电饭煲"],
      "家具": ["沙发", "床"]
    }
  };
  

• 组件拆分：可以把第三级抽成单独的StepThree组件，通过props传递必要的参数（比如可选列表、选中状态、选择回调），保持组件职责单一：

  const StepThree = ({ options, selectedValue, onSelect }) => (
    <ul>
      {options.map(opt => (
        <li
          key={opt}
          className={selectedValue === opt ? 'active' : ''}
          onClick={() => onSelect(opt)}
        >
          {opt}
        </li>
      ))}
    </ul>
  );
  

• 边界处理：记得处理空状态，比如当第二级未选中时，第三级显示提示；当第三级无选项时，显示“暂无可选内容”：

  {selectedSecond ? (
    thirdOptions.length > 0 ? (
      <StepThree 
        options={thirdOptions} 
        selectedValue={selectedThird} 
        onSelect={setSelectedThird} 
      />
    ) : (
      <li className="empty-state">暂无可选内容</li>
    )
  ) : (
    <li className="disabled">请先选择第二级选项</li>
  )}
  

这样一套流程下来，第三级联动就可以正常工作了。如果在具体实现中遇到数据处理或者状态传递的问题，随时细化问题来问就行～

内容的提问来源于stack exchange，提问作者Mr B