JS中event已弃用无法使用preventDefault？React Firebase注册表单报错

你碰到的event弃用提示，本质是两个代码问题叠加导致的：

• 全程依赖浏览器全局window.event对象做阻止默认行为的操作。这个是早年IE遗留的非标准实现，现在浏览器为了兼容才临时保留，早就被标记为弃用，迟早会移除；而且异步执行的场景下，全局event在代码运行时早就被清空，根本拿不到正确的事件实例
• 你在组件渲染的顶层（return语句之前）直接调用event.preventDefault()，这个时机根本没有正在触发的表单提交事件，直接就会触发空引用报错
• 表单的提交回调没有把原生事件透传给处理函数，导致函数内部只能引用全局event，进一步触发弃用提示

1. 直接删掉组件顶层那行毫无作用的event.preventDefault()，这行代码没有任何事件上下文，留着只会报错
2. 给signUp函数增加事件入参，把内部引用全局event的位置替换为传入的事件对象：

   const signUp = async (event) => {
     // 用函数入参拿到的event阻止默认提交，不依赖全局变量
     event.preventDefault()
     // 原有Firebase注册逻辑完全不需要改动
     try {
       if (firebaseInstance) {
         const user = await firebaseInstance
           .auth()
           .createUserWithEmailAndPassword(email.value, password.value)
         console.log("user", user)
         alert(`Welcome ${email.value}!`)
       }
     } catch (error) {
       console.log("error", error)
       alert(error.message)
     }
   }
   

3. 修改表单的提交绑定，不要用无参箭头函数截断事件传递：
   把原来的 <FormWrapper onSubmit={() => signUp()}> 改成直接绑定函数引用，让React自动把原生提交事件作为第一个参数传给signUp：

   <FormWrapper onSubmit={signUp}>
   

   如果signUp需要额外传其他自定义参数，也要显式把事件对象带进去：

   <FormWrapper onSubmit={(e) => signUp(e, 自定义参数)}>
   

所有需要调用preventDefault()的场景，都必须通过回调入参拿到当前交互对应的事件实例，永远不要依赖全局的event变量——尤其是异步函数内部，全局event的生命周期极短，早在上一个事件执行完就被浏览器清空了，根本不可靠。

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