React中切换上级Select时如何将下级选项重置为初始状态

问题根因 #

你遇到的问题是React表单组件的典型非受控组件特性导致的：

• 你给<select>标签加的defaultValue属性仅在组件首次挂载时生效，后续组件重渲染时，React不会主动更新已经挂载的select的选中状态，所以切换site后之前选的MDC值会残留。
• 你修改mdcDefaultVal不生效也符合这个逻辑：这个变量只控制默认提示选项的文本内容，根本没有和select的实际选中值做绑定，改它自然不会影响选中状态。

修复步骤 #

1. 把所有级联下拉都改成受控组件，给每一级单独维护选中状态
   以MDC为例，先在组件里新增对应状态，初始值设为默认选项的value值"00"，Shelf、Unit两级也按同样逻辑加状态：

   const [selectedSite, setSelectedSite] = useState("00");
   const [selectedMdc, setSelectedMdc] = useState("00");
   const [selectedShelf, setSelectedShelf] = useState("00");
   const [selectedUnit, setSelectedUnit] = useState("00");
   

2. 在上级选项的change回调里，重置所有下级的选中值和禁用状态
   修改site的切换处理函数selectSiteHandler，只要选中的site变化，就把后面三级的选中值全部重置回默认值，同时把对应下拉的禁用状态设为初始值：

   const selectSiteHandler = (e) => {
     const currentSite = e.target.value;
     setSelectedSite(currentSite);
     
     // 重置所有下级状态
     setSelectedMdc("00");
     setSelectedShelf("00");
     setSelectedUnit("00");
     setMdcDisabled(currentSite === "00"); // 选回World Wide时直接禁用MDC
     setShelfDisabled(true);
     setUnitDisabled(true);
   }
   

3. 给每个select标签绑定value属性，和维护的状态做双向关联
   不要在option上单独加defaultValue属性，select的选中状态统一交给绑定的value控制。修改后的site和MDC下拉代码参考：

   <select name="site" id="site" onChange={selectSiteHandler} value={selectedSite}>
     <option value="00">
       World Wide
     </option>
     {jobSites && jobSites.map((site, key) => {
       return <option value={site.physical_site_name} key={key + 1}>{site.physical_site_name} - 10</option>
     })}
   </select>
   <select
     name="mdc"
     id="mdc"
     onChange={(e) => {
       const currentMdc = e.target.value;
       setSelectedMdc(currentMdc);
       selectMdcHandler(e); // 保留你原本的MDC处理逻辑
       // 选中有效MDC值时解锁Shelf，选回默认值就重置并禁用后续菜单
       setShelfDisabled(currentMdc === "00");
       if(currentMdc === "00") {
         setSelectedShelf("00");
         setSelectedUnit("00");
         setUnitDisabled(true);
       }
     }}
     disabled={mdcDisabled}
     value={selectedMdc}
   >
     <option value="00">
       MDC
     </option>
     {!mdcDisabled && dropdownFormatter(assetList, "mdc", selectedSite).map((mdc, key) => {
       return <option value={mdc} key={key + 1}>MDC {mdc}</option>
     })}
   </select>
   

补充：Shelf和Unit两级也按MDC的逻辑改就行，选中上级有效值时解锁下级，上级切回默认值时就重置下级所有状态，就能保证整个级联逻辑完全同步，不会出现值残留的显示异常。

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