在我的项目中,我创建了一个负责登录的组件。它返回一个表单,并包含一个名为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>
</>
)
由于您没有使用分号,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对象): 为什么使用对我不起作用? .过滤器不是函数 建议的对象替代方案是什么?