React中antd Select无法取值且报cannot destructure currentTarget错误如何解决

问题根因 #

antd 不同表单组件的onChange回调参数规范不统一：

• Input、上传类组件的onChange回调入参是原生事件对象，携带currentTarget字段
• Select组件的onChange回调第一个参数为选中值，第二个为选中的Option配置对象，不存在原生事件的currentTarget属性，因此按原有逻辑解构会抛出cannot destructure currentTarget of undefined错误。

解决方案 #

不需要修改已编写的通用handleChange逻辑，仅需调整封装的Select组件，将onChange参数包装为适配通用逻辑的模拟事件对象即可：

<Select 
  name={name} 
  size="medium" 
  style={{ width: '350px' }} 
  {/* 先透传除了onChange之外的其他属性 */}
  {...{...rest, onChange: undefined}}
  {/* 重写onChange，包装为通用handleChange适配的结构 */}
  onChange={(value) => {
    rest.onChange?.({
      currentTarget: {
        name,
        value,
        type: 'select'
      }
    })
  }}
>
  {/* 删掉原有代码中多余的空<Select.Option />，避免出现空白选项 */}
  {options.map((option) => (
    <Select.Option key={option._id} value={option._id}>
      {option.name || option}
    </Select.Option>
  ))}
</Select>

调整后Select的选中值会正常写入state的data对应name字段，原有校验逻辑也可以正常复用。后续如果需要适配DatePicker、Cascader等其他antd表单组件，都可以用同样的方式包装onChange参数，无需修改核心的handleChange代码。

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