我目前正在做一个Youtube教程的React待办事项列表由网络开发简化linksource codes
在NewToForm中。jsx表单,有一个带有onSubmit处理程序的表单
<form onSubmit={handleSubmit} className="new-item-form">
<div className="form-row">
<label htmlFor="item">New Item</label>
<input
value={newItem}
onChange={e => setNewItem(e.target.value)}
type="text"
id="item"
/>
</div>
<button className="btn">Add</button>
</form>
function handleSubmit(e) {
e.preventDefault()
if (newItem === "") return
onSubmit(newItem)
setNewItem("")
}
在代码中,onSubmit的值等于handleSubmit,这是一个更改某些状态值的函数。
但据我所知,需要一个箭头函数来 Package 事件处理程序,否则react会无限次地重新渲染。
Why it is necessary to use Arrow functions with React Event handler | by kirill ibrahim | Dev Genius
所以我想问为什么提交的事件处理程序与点击和更改的不同?handleSubmit函数有什么特殊之处吗?谢谢大家!
1条答案
按热度按时间a64a0gku1#
form
的onSubmit
与其他元素的任何事件没有区别。在Javascript中,
function
是一级对象,这意味着它们可以被分配给一个变量并传递。类似于我们在变量中传递字符串或整数的方式。现在在这一行:
我们在技术上将form的
onSubmit
函数设置为handleSubmit
。需要注意的一点是,我们只是将handleSubmit
**分配给onSubmit
,这就是为什么它可以工作。现在在您链接的文章中,它显示了如下内容:
关键的区别是这次是
onSubmit={handleSubmit()}
。这不再是任务了一旦我们添加了()
,它就已经是一个函数调用,并且handleSubmit
被调用。这也是为什么在每次渲染期间,它已经被立即调用。如果我们坚持用
onSubmit={handleSubmit()}
的方式,我们必须把它放在一个箭头函数中,这样它就不再是一个函数调用了,而是一个要调用的函数的定义(它又是一个赋值)。就像这样:如果我们在函数上没有参数,我们可以坚持使用
onSubmit={handleSubmit}
以获得更简单的语法,但如果我们有参数,我们就不能真正传递它,因为一旦我们添加了()
,它就会成为一个函数调用。因此,我们有箭头函数语法来帮助我们这样做: