React开发中onSubmit绑定内联箭头函数的原因及不使用的影响

为什么此处的onSubmit事件要使用内联箭头函数进行绑定？ #

最核心的目的是给事件处理函数传递自定义参数createUser，同时满足React事件回调的绑定规则：

• 内联箭头函数会创建一个新的函数引用作为事件回调，只有当表单提交事件真实触发时，才会执行函数内部的handleSubmit(createUser)逻辑，不会在组件渲染阶段就提前执行handleSubmit
• 如果是类组件场景下编写这段逻辑，箭头函数不会绑定独立的this上下文，也能保证handleSubmit内部的this直接指向组件实例，不需要额外做this绑定操作

如果不使用内联箭头函数的写法，会出现什么问题？ #

要看你替换成哪种写法，不同写法的问题不同：

• 如果直接写成 <form onSubmit={handleSubmit(createUser)} ...>：
  组件渲染的瞬间就会立刻执行handleSubmit(createUser)，完全不等用户提交表单。同时onSubmit实际接收到的是handleSubmit的返回值，后续用户提交表单时不会触发任何逻辑，大概率会直接抛出类型错误
• 如果直接写成 <form onSubmit={handleSubmit} ...>：
  handleSubmit接收的第一个参数会是表单提交的原生事件对象，无法拿到你需要传入的createUser参数，业务逻辑无法正常运行

如果确实不想用内联箭头函数，也可以用bind预传参的写法实现完全等效的效果，这种写法是合法合规的：

<form onSubmit={handleSubmit.bind(this, createUser)} className={classes.form}>

内容的提问来源于stack exchange，提问作者victhangnguyen