Ant Design Input点击allowClear清除按钮报target只读TypeError如何解决

• 属性使用不规范：同时给Input组件传入了value和defaultValue两个互斥属性——value是受控组件的值绑定属性，defaultValue是非受控组件的默认值属性，二者同时传会导致组件在受控/非受控状态间异常切换，干扰内部事件逻辑的正常执行。
• 版本兼容缺陷：点击清空按钮抛错的核心原因是当前使用的antd版本与React版本不兼容。React 17及以上版本中，原生事件对象的target属性为只读，而旧版antd实现allowClear清空逻辑时，会尝试直接修改事件对象的target属性赋值，直接触发了只读属性写入的类型错误。

按优先级选择以下方案处理即可：

• 修正属性绑定：如果是受控组件用法，直接删掉defaultValue属性，只保留value和onChange的绑定即可，修正后的基础代码如下：

<Input
  allowClear
  value={value}
  onChange={e => {
    setValue(e.target.value);
  }}
  placeholder="Search"
/>

• 升级依赖版本：如果删除defaultValue后仍然报错，说明当前antd版本过旧没有做对应兼容，升级到对应大版本的稳定版即可：
  • 用antd 4.x的场景升级到4.20.0及以上版本，官方已经修复了React 17+下清空按钮的事件兼容问题
  • 用antd 5.x的场景直接升级到最新稳定版即可，该版本线不存在这个兼容问题
• 临时应急方案（仅适合暂时没法升级依赖的场景）：自定义清空按钮的点击逻辑，绕开antd内部有问题的事件构造流程，示例代码如下：

import { CloseOutlined } from '@ant-design/icons';

<Input
  allowClear={{
    clearIcon: <CloseOutlined onClick={() => setValue('')} />
  }}
  value={value}
  onChange={e => setValue(e.target.value)}
  placeholder="Search"
/>

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