时间戳

首页 > 解决方案 > Javascript 中的“事件”已被弃用，我不能使用“preventDefault()”

javascript - Javascript 中的“事件”已被弃用，我不能使用“preventDefault()”

问题描述

我正在尝试使用该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

以及使用输入代码：

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

标签： javascriptformsevent-handlingdom-eventspreventdefault

解决方案

该警告的意思是不推荐使用全局变量 window.event。您仍然可以访问与事件处理程序关联的事件，您只需要以正确的方式进行 - 通过使用处理程序回调中的参数。

改变

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

至

<FormWrapper onSubmit={signUp}>

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

const signUp = async (event) => {

但是不要放入event.preventDefault()你的功能组件的主体——也就是说，它不应该在这里：

event.preventDefault()
  return (
    ...

仅将其放在signUp处理程序中。

推荐阅读