我目前正在做一个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}以获得更简单的语法，但如果我们有参数，我们就不能真正传递它，因为一旦我们添加了()，它就会成为一个函数调用。因此，我们有箭头函数语法来帮助我们这样做：