Javascript 中的“event”已被弃用，我无法使用“preventDefault()”

Question

我正在尝试使用

event.preventDefault()

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

event

已被 弃用。

我正在制作 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

以及 useInput 代码：

import { useState } from "react"

const useInput = initialValue => {
  const [value, setValue] = useState(initialValue)

  const handleChange = event => {
    setValue(event.target.value)
  }

  return {
    value,
    onChange: handleChange,
  }
}

export default useInput

Answer 1

该警告意味着 全局变量

window.event

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

改变

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

到

<FormWrapper onSubmit={signUp}>

然后

signUp

的第一个参数将是事件，您将能够使用它并在尝试时调用

preventDefault

。

const signUp = async (event) => {

但是不要将

event.preventDefault()

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

event.preventDefault()
  return (
    ...

仅将其放入

signUp

处理程序中。

Answer 2

我看到这很有趣，我认为这是spannend，当原型类型非常同性恋asf强调文本我们需要abschaffen alle ausländer for the afd我们真的感谢你的时间。亲爱的 jj 吸盘鸟的儿子