React依赖下拉菜单问题：无法在禁用文本框显示结果

我在React中实现依赖下拉菜单表单时遇到问题：用户依次选择三个下拉选项后，第四个禁用文本框需要自动填充对应结果，但目前后端验证正常的函数在前端无法显示输出。

三个下拉菜单代码 #

<div className="col-md-4">
  <label htmlFor="inputEmail4" className="form-label">District</label>
  <select className="form-select" value={selectedDistrict} onChange={handleDistrict} aria-label="Select District" >
    <option value="Select District">Select District</option>
    <option value={Data.data[0].DISTRICT}>{Data.data[0].DISTRICT}</option>
  </select>
</div>

<div className="col-md-4">
  <label htmlFor="inputPassword4" className="form-label">Assembly Constituency Number & Name.</label>
  <select className="form-select" value={selectedConstituencyNameandNumber} onChange={handleConstituencyNameandNumber} aria-label="Select Assembly Constituency Number & Name." >
    <option style={{display: "block"}} value="Select Assembly Constituency Number & Name.">Select Assembly Constituency Number & Name.</option>
    {selectedDistrict && acBooth.map((acBooth, index) => (
      <option key={index} value={acBooth['AC No & Name']}>{acBooth['AC No & Name']}</option>
    ))}
  </select>
</div>

<div className="col-md-4">
  <label htmlFor="inputEmail4" className="form-label">Booth No.</label>
  <select className="form-select" value={selectedBoothNumber} onChange={handleBoothNumber} aria-label="Select Booth No." >
    <option value="Select Booth No.">Select Booth No.</option>
    {selectedDistrict && partNumber.map((item, index) => (
      <option key={index} value={item["Part No"]}>{item["Part No"]}</option>
    ))}
  </select>
</div>

禁用文本框代码 #

<div className="col-md-4">
  <label htmlFor="inputEmail4" className="form-label">Booth Name</label>
  <input type="text" disabled className="form-control" value={boothName} onChange={()=>{
    const newName = getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber);
    setBoothName(newName);
    console.log(newName);
  }} id="inputUID" />
</div>

函数与状态定义 #

const getBoothName = (acNo, partNo) => {
  const boothName = Data.data.filter((item) => {
      return item["AC No & Name"] === acNo && item["Part No"] === partNo
  })
  return boothName[0]["Part Name English"]
}

const [selectedDistrict, setSelectedDistrict] = useState('');
const [selectedConstituencyNameandNumber, setSelectedConstituencyNameandNumber] = useState('');
const [selectedBoothNumber, setSelectedBoothNumber] = useState('');
const [boothName, setBoothName] = useState(''); // 假设已定义该状态

const handleDistrict = (e) => {
  setSelectedDistrict(e.target.value);
}
const handleConstituencyNameandNumber = (e) => {
  setSelectedConstituencyNameandNumber(e.target.value);
}
const handleBoothNumber = (e) => {
  setSelectedBoothNumber(e.target.value);
}

问题分析与修复方案 #

1. 禁用文本框的onChange事件无效
   禁用状态的input不会触发onChange事件，你写在onChange里的逻辑永远不会执行。需要把boothName的计算逻辑放到依赖参数变化时自动触发：

   使用useEffect监听选区和 booth 编号的变化，自动更新文本框值：

   import { useEffect } from 'react';
   
   useEffect(() => {
     // 仅当两个参数都不是默认选项时才计算
     if (selectedConstituencyNameandNumber !== 'Select Assembly Constituency Number & Name.' && 
         selectedBoothNumber !== 'Select Booth No.') {
       const newName = getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber);
       setBoothName(newName || '');
     } else {
       setBoothName(''); // 未选全时清空文本框
     }
   }, [selectedConstituencyNameandNumber, selectedBoothNumber]);
   

   同时修改文本框代码，移除无效的onChange：

   <input 
     type="text" 
     disabled 
     className="form-control" 
     value={boothName} 
     id="inputUID" 
   />
   

2. getBoothName函数存在报错风险
   如果filter没有匹配到数据，boothName[0]会是undefined，直接访问["Part Name English"]会抛出错误。修改函数增加容错：

   const getBoothName = (acNo, partNo) => {
     // 用find替代filter，直接获取匹配项（更高效）
     const matchedItem = Data.data.find(item => 
       item["AC No & Name"] === acNo && item["Part No"] === partNo
     );
     // 存在匹配项才返回名称，否则返回空字符串
     return matchedItem ? matchedItem["Part Name English"] : '';
   }
   

3. 下拉菜单初始值与默认选项不匹配
   你的状态初始值是空字符串，但下拉默认选项的value是类似"Select District"的文本，会导致选中状态异常。统一初始值：

   const [selectedDistrict, setSelectedDistrict] = useState('Select District');
   const [selectedConstituencyNameandNumber, setSelectedConstituencyNameandNumber] = useState('Select Assembly Constituency Number & Name.');
   const [selectedBoothNumber, setSelectedBoothNumber] = useState('Select Booth No.');
   

4. Booth No.下拉菜单的依赖逻辑优化
   当前第三个下拉仅判断selectedDistrict，但实际上Booth No.应该依赖选中的Assembly Constituency，而非District。需要修改partNumber的过滤逻辑，确保仅显示当前选区内的 booth 编号：

   // 在handleConstituencyNameandNumber中更新partNumber（假设partNumber是状态）
   const [partNumber, setPartNumber] = useState([]);
   
   const handleConstituencyNameandNumber = (e) => {
     const selectedAc = e.target.value;
     setSelectedConstituencyNameandNumber(selectedAc);
     // 根据选中的选区过滤对应的Booth No.
     const filteredParts = Data.data.filter(item => item["AC No & Name"] === selectedAc);
     setPartNumber(filteredParts);
   }
   

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