React自定义Select组件onChange取值报错，求解决方案

架构老林

2026-8-2

解决React选择框组件onChange取值报错问题

问题根源

InputSelect组件的handleOnChange触发时，传递给父组件的参数是选中的option对象和action元数据，而非原生DOM事件对象。你当前的providerUpdate函数错误地尝试从e.target.value取值，自然会报Cannot read properties of undefined (reading 'value')错误。

解决方案

1. 修正Customer组件中的providerUpdate函数

修改参数接收逻辑，直接从传入的option对象中获取value：

function providerUpdate(option: InputSelectItem, actionMeta: ActionMeta<any>) {
  // 兼容清空选择的场景，兜底空字符串
  const selectedValue = option?.value || "";
  alert(String(selectedValue));
  setProviderId(selectedValue);
}

2. 完善InputProvider的Props类型定义

统一和InputSelect的onChange类型对齐，避免any类型隐患：

// 先引入对应类型（替换为实际文件路径）
import type { InputSelectItem, ActionMeta } from './InputSelect';

interface Props {
  id: string;
  selectedVal: string;
  // 兼容清空时option为null的情况
  onProviderChange: (option: InputSelectItem | null, actionMeta: ActionMeta<any>) => void;
}

3. 同步选择框选中状态（可选优化）

目前InputProvider未将selectedVal传递给InputSelect，可能导致状态不一致。可通过useField同步父组件状态：

export default function InputProvider({id, onProviderChange, selectedVal}: Props) {
  const { data: ListOfCustomerTradeProviders } = useQuery("CustomerTradeProviders", () => getListofCustomerTradeProviders());
  const [field, meta, helpers] = useField("providerId");

  // 监听父组件状态变化，同步到选择框
  useEffect(() => {
    helpers.setValue(selectedVal);
  }, [selectedVal, helpers]);

  return (
    <InputSelect
      name="providerId"
      label="Provider"
      instanceId={id}
      onChange={onProviderChange}
      options={ListOfCustomerTradeProviders || []}
    />
  );
}