javascript - React.js : e. PreventDefault(…) 不是一个函数

Question

在我的项目中，我创建了一个负责登录的组件。它返回一个表单并包含一个名为 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("")
    }
}

我想让整个事情看起来更好，并将 3 个 if 语句替换为 2 个三元运算符和 1 个 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("")
    }
}

但是，一旦我尝试此操作，就会出现以下错误:

TypeError: e.preventDefault(...) is not a function

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

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

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>
    </>
)

Answer 1

由于您没有使用分号，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/