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 处理程序中。

Javascript 中的 "event" 已弃用，我无法使用 "preventDefault()"

"event" in Javascript is deprecated and I cannot use "preventDefault()"

javascript

forms

event-handling

dom-events

preventdefault