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("")
    }
}

我想让整个事情看起来更好，并用两个三元运算符和一个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("")
    }
}

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

TypeError:e.preventDefault（…）不是函数

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

组件的return语句（包括表单）如下所示：

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/