disabled属性导致input的onChange无法触发，无法更新state求助

AI 小北

2026-8-15

问题原因

浏览器默认会阻止**禁用（disabled）**的表单元素触发任何用户交互事件，包括onChange，所以你的handleChangeLevel3函数完全不会执行，自然无法将拼接后的值同步到inputList state中。

解决方案

方案1：用`readOnly`替代`disabled`

将输入框的disabled属性替换为readOnly，输入框依然保持不可编辑状态，但可以触发onChange事件（用户无法手动修改值，仅适配代码驱动的value更新场景）：

<input
  className="form-control"
  type="text"
  name="xero_code"
  onChange={(e) =>
    handleChangeLevel3(
      e,
      i,
      index,
      "product_information",
      "order_list_products"
    )
  }
  value={
    spreadList.machine +
    "" +
    data.product_name +
    "" +
    spreadList.spreadRate +
    "." +
    spreadList.location
  }
  placeholder="Xero Code"
  readOnly 
/>

方案2：监听依赖变量变化，主动更新state

输入框的value由spreadList和data.product_name拼接生成，直接用useEffect监听这两个变量的变化，当它们更新时主动修改inputList中对应的xero_code字段，无需依赖onChange：

import { useEffect } from 'react';

// 在组件内部添加该监听逻辑
useEffect(() => {
  const xeroCodeValue = `${spreadList.machine}${data.product_name}${spreadList.spreadRate}.${spreadList.location}`;
  setDirty();
  // 注意：如果是多层嵌套对象，浅拷贝可能不够，需用深拷贝（比如JSON.parse(JSON.stringify(inputList))）
  const updatedList = { ...inputList };
  updatedList.product_information[i].order_list_products[index].xero_code = xeroCodeValue;
  setInputList(updatedList);
  handleXeroCode();
}, [spreadList, data.product_name, i, index, inputList]); // 务必添加所有依赖项

此方案可保留disabled属性，因为无需依赖输入框交互事件更新state。