React三级联动下拉菜单异常：第三级选项不显示且第二级取值失败

核心问题 #

你的代码存在两个关键问题，导致第三级下拉菜单不显示、第二级取值无法获取：

1. 第二级下拉未绑定onChange事件：用户选择第二级选项时，没有触发状态更新，subSelected始终为空，第三级的判断逻辑自然无法生效。
2. 切换第一级时未重置下级状态：更换第一级选项后，第二、三级的旧选中值会残留，导致逻辑混乱。

修复后的完整代码 #

import logo from './logo.svg';
import './App.css';
import * as React from "react";

const App = () => {
  const [selected, setSelected] = React.useState("");
  const [subSelected, setSubSelected] = React.useState("");

  // 第一级选择变化时，重置第二、三级的选中状态
  const changeSelectOptionHandler = (event) => {
    setSelected(event.target.value);
    setSubSelected("");
  };

  // 绑定第二级的onChange，更新subSelected状态
  const changeSubSelectOptionHandler = (event) => {
    setSubSelected(event.target.value);
  };

  const PVC_Water = ["4\"", "6\"", "8\"", "10\"", "12\"", "14\"", "16\"", "18\"", "20\"", "24\"", "30\"", "36\"", "42\"", "48\"", "54\"", "60\""];
  const PVC_Gravity = ["4\"", "6\"", "8\"", "10\"", "12\"", "15\"", "18\"", "21\"", "24\"", "27\"", "30\"", "36\"", "42\"", "48\"", "54\"", "60\""];

  let type = null;
  let subType = null;
  let options = null;
  let subOptions = null;

  if (selected === "PVC for Water Mains") {
    type = PVC_Water;
  } else if (selected === "PVC for Gravity Sewer") {
    type = PVC_Gravity;
  }

  // 根据第二级选中值生成第三级选项
  if (subSelected === "4\"") {
    subType = ["option 1", "option 2"];
  } else if (subSelected === "6\"") {
    subType = ["option 3", "option 4"];
  } else {
    subType = null;
  }

  if (type) {
    // 给第二级加默认占位选项
    options = (
      <>
        <option>Choose size...</option>
        {type.map((el) => <option key={el}>{el}</option>)}
      </>
    );
  }

  if (subType) {
    // 给第三级加默认占位选项
    subOptions = (
      <>
        <option>Choose sub option...</option>
        {subType.map((el) => <option key={el}>{el}</option>)}
      </>
    );
  }

  return (
      <div
          style={{
            padding: "16px",
            margin: "16px",
          }}
      >
        <form>
          <div>
            <select onChange={changeSelectOptionHandler} value={selected}>
              <option value="">Choose...</option>
              <option>PVC for Water Mains</option>
              <option>PVC for Gravity Sewer</option>
              <option>PVC Pressure Rated (IPS)</option>
              <option>Ductile Iron Pipe</option>
              <option>HDPE Pipe (IPS)</option>
              <option>HDPE Pipe (DIPS)</option>
              <option>Steel (NPS)</option>
            </select>
          </div>
          <div>
            {/* 给第二级绑定onChange事件，并设置value关联状态 */}
            <select onChange={changeSubSelectOptionHandler} value={subSelected} disabled={!type}>
              {options || <option>Select category first...</option>}
            </select>
          </div>
          <div>
            <select disabled={!subType}>
              {subOptions || <option>Select size first...</option>}
            </select>
          </div>
        </form>
      </div>
  );
};

export default App;

额外优化点 #

• 给下拉菜单添加disabled属性，当下级无选项时禁用，避免无效操作。
• 所有下拉都添加了默认占位选项，提升用户操作体验。
• 第一级下拉绑定value属性，确保选中状态与state完全同步。

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