React.js拖拽功能仅在Chrome浏览器突然失效问题咨询

根因判断与排查方法 #

1. Chrome本身临时回归bug概率更高 #

Chrome支持后台静默自动更新，无需用户手动操作即可完成版本升级。你描述的无代码改动自动恢复的现象，完全匹配Chrome推送了带拖拽API相关问题的小版本后，后续又快速推送修复补丁的特征。
这类临时问题通常只会出现在特定版本的Chrome渠道中，同内核的Edge因为发版节奏差异，不会同步出现同类故障，和你观测到的Edge正常、Chrome异常的现象完全吻合。

2. 扩展冲突的验证方案 #

如果后续再次复现该问题，可按以下步骤确认是否为扩展导致：

• 打开Chrome无痕模式，进入设置关闭「允许无痕模式使用扩展」选项，访问页面测试拖拽功能，若功能正常即可判定为扩展冲突
• 常见会误拦截拖拽事件的扩展类型包括：广告拦截工具、密码管理器、全局网页翻译插件、下载管理工具、网页增强类效率插件
• 如果是扩展导致的自动恢复，通常是对应扩展后台自动更新，修复了之前误劫持页面拖拽事件的逻辑

代码优化提示 #

你提供的代码存在一处不影响事件逻辑的样式笔误：className属性中的items- center有多余空格，正确写法为items-center。

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