当前位置: 首页 > 知识库问答 >
问题:

React.js:e.preventDefault(…)不是函数[重复]

锺离德运
2023-03-14

在我的项目中,我创建了一个负责登录的组件。它返回一个表单,并包含一个名为onSubmit的验证方法。目前的方法如下:

import { useState } from "react"

function Login({ onLogin }) {
    const [name, setName] = useState("")
    const [password, setPassword] = useState("")

    function onSubmit(e) {
        e.preventDefault()

        if (!name && !password) return alert("Please enter a username and a password!")
        if (!name) return alert("Please enter a username!")
        if (!password) return alert("Please enter a password!")

        onLogin({ name, password })

        setName("")
        setPassword("")
    }
}

我想让整件事看起来更好,并用2个三元运算符和1个if语句切换了3个if语句:

import { useState } from "react"

function Login({ onLogin }) {
    const [name, setName] = useState("")
    const [password, setPassword] = useState("")
    let missingData

    function onSubmit(e) {
        e.preventDefault()

        (!name && !password) ? missingData = "username and a password" : !name ? missingData = 
"username" : missingData = "password"
        if (!password || !name) return alert(`Please enter a ${missingData}!`)

        onLogin({ name, password })

        setName("")
        setPassword("")
    }
}

但是,只要我尝试此操作,就会出现以下错误:

e.prevent默认值(...)不是函数

我不知道在这里使用三元是如何影响事件对象的。特别是因为我在寄存器组件中以类似的方式完成了它,并且没有发生错误。

组件的返回语句,包括表单,如下所示:

return (
    <>
        <h3>Login</h3>
        <form onSubmit={onSubmit}>
            <label>Username</label>
            <input
                type="text"
                placeholder="Username"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />

            <label>Password</label>
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />

            <input type="submit" value="Login" />
        </form>
    </>
)

共有1个答案

谷越
2023-03-14

由于您没有使用分号,JavaScript很难确定包含e.preventDefault()的行是否已结束并将其与下一行组合。

您可以通过在以下两个地方之一添加分号来解决此问题:

function onSubmit(e) {
  e.preventDefault();
  ...

function onSubmit(e) {
  e.preventDefault()

  ;(!name && !password) ? missingData = "username and a password" : !name ? missingData = 
"username" : missingData = "password"
  ...

您可以在这里的“用不明显是新语句的代码开始一行”下找到进一步的解释:https://www.learnbasicjs.com/do-i-need-semicolons-in-javascript/

 类似资料:
  • 在我的项目中,我创建了一个负责登录的组件。它返回一个表单并包含一个名为的验证方法。当前该方法如下所示: 我想让整个事情看起来更好,并用两个三元运算符和一个if语句切换了3个if语句: 但是,只要我尝试此操作,就会出现以下错误: TypeError:e.preventDefault(…)不是函数 我不知道在这里使用三元是如何影响事件对象的。特别是因为我在寄存器组件中以类似的方式完成了它,并且没有发生

  • 我有以下组件,它维护当事件在特定元素上被激发时更新的状态,并且当状态被更新时,它将作为道具传递给另一个组件。我正在尝试为什么会出现以下错误“this.setstate is not a function”,它很可能没有绑定到正确的上下文。但我不确定这一点,我这样做对吗? 编辑:我刚刚意识到当“onreadystatechange”函数时上下文会发生变化,所以我在searchGif中做了以下操作

  • 我正在一个WordPress网站上工作——它有大量的自定义代码和插件以及各种JQuery、引导和框架加载。 在最后一个加载页脚的最底部-I处: 我得到了错误: 显然,JQuery已经加载。我也尝试过在那里放置其他JQuery——除了加载的JQuery之外——我得到了相同的错误。 为什么我会得到$nota函数错误?

  • 尝试从组件订阅HTTP-GET的解析响应。得到一个错误的说法。无论是从HTTPService还是从组件类使用,map都不是一个函数。 但以下工作: 解析在Httpdemo服务中也不起作用。 我的代码中的用法有什么问题?

  • 它可能会引起某人的兴趣并节省几个小时,这是一个令人讨厌的捆绑问题,eval来自一个文件,函数来自第二个文件。 将导致:未捕获的类型错误:评估(...)不是一个函数 这就是解决办法 缺少分号,我在JS optional中读了几遍该分号。 为什么eval不是此上下文中的函数?

  • 这是我的对象(确保它是typeof对象): 为什么使用对我不起作用? .过滤器不是函数 建议的对象替代方案是什么?