React.js: e.preventDefault(…) 不是函数

Question

在我的项目中，我创建了一个负责登录的组件。它 return 是一个表单，包含一个名为 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 个三元运算符和一个 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语句，包括表单，如下所示：

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/

React.js: e.preventDefault(…) 不是函数

React.js: e.preventDefault(…) is not a function

javascript

reactjs

event-handling

dom-events

react-component