React中能否为表单绑定两个onSubmit提交事件？

你当前的写法存在两个错误：

• && 运算符的逻辑是左侧表达式为真值时，返回右侧表达式的结果，你左侧写的handleSubmit是函数对象，布尔判定为真，所以整个handleSubmit && clearCartStorage()最终只会返回clearCartStorage()的执行结果
• 你给clearCartStorage加了括号()，相当于组件渲染阶段就会直接执行这个清空方法，不是等到表单提交时触发，且最终onSubmit绑定的是clearCartStorage的返回值（默认是undefined），自然不会触发handleSubmit的逻辑

方法1：在原有提交逻辑中追加清空调用 #

直接修改handleSubmit，在内部调用clearCartStorage即可，代码如下：

const handleSubmit = (e) => {
  e.preventDefault();
  alert(`Thank you for your order! ^_^ Please check your texts for updates!`);
  toggle()
  clearCartStorage() // 追加这一行即可
};

const clearCartStorage = () => {
  localStorage.clear();
}

表单绑定直接写：

<Form onSubmit={handleSubmit}>

方法2：匿名函数包裹两个执行逻辑 #

如果你不想修改原有的handleSubmit函数，可以在绑定onSubmit时用匿名函数同时调用两个方法，注意要把事件对象e传给handleSubmit：

<Form onSubmit={(e) => {
  handleSubmit(e)
  clearCartStorage()
}}>

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