&引用；事件“；在Javascript中不推荐使用，我不能使用；preventDefault（）；

我试图使用

event.preventDefault（）

方法，但不断收到错误。它说

事件

已被弃用

我正在制作Firebase注册表单，我想阻止表单提交

这是完整的代码

import React from "react"
import styled from "styled-components"
import getFirebase from "../../firebase"
import useInput from "./useInput"

const SignUpForm = () => {
  const firebaseInstance = getFirebase()
  const email = useInput("")
  const password = useInput("")

  const signUp = async () => {
        event.preventDefault()
    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)
    }
  }
event.preventDefault()
  return (
    <FormWrapper onSubmit={() => signUp()}>
      <Title>Sign up</Title>
      <Input placeholder="Email" {...email} />
      <Input placeholder="Password" type="password" {...password} />
      <Button type="submit">Sign up</Button>
    </FormWrapper>
  )
}

export default SignUpForm

---

该警告意味着全局变量

window.event

已弃用。您仍然可以访问与事件处理程序关联的事件，您只需使用处理程序回调中的参数以正确的方式进行即可

改变

<FormWrapper onSubmit={() => signUp()}>

但不要将

event.preventDefault（）

放在功能组件的主体中，也就是说，它不应该放在这里：

event.preventDefault()
  return (
    ...

---

只将它放在

注册

处理程序中。

不清楚

FormWrapper

如何使用其

onSubmit

属性，但假设它是一个事件处理程序，典型的模式（当然是原生DOM事件）是将事件对象作为函数参数传递给它。因此，您可以将该属性作为

onSubmit={signUp}

传递，然后让

signUp=async（event）=>{event.preventDefault（）；/*代码的其余部分*/}

在表单提交处理程序中，使用

event.preventDefault（）

，但从不将

事件

传递给该函数。更改此行：

注册（事件）}>

（注意添加的事件对象）

<FormWrapper onSubmit={signUp}>

const signUp = async (event) => {

event.preventDefault()
  return (
    ...