Reactstrap表单同时触发onClick函数与Form action的实现方案咨询

这个问题很常见，核心原因是你把提交逻辑拆分到了按钮的onClick和表单的默认action上，浏览器的表单提交流程会被React的事件处理机制干扰，导致两者无法同时触发。下面给你两种可靠的解决方案：

方案1：使用表单的onSubmit事件（推荐） #

把你的addExercise逻辑移到表单的onSubmit事件里，这是更符合React表单处理规范的方式，既能执行自定义逻辑，又能保留表单的默认提交行为：

1. 给表单添加onSubmit处理函数：

<Form action="/api/exercises" method="post" onSubmit={this.handleFormSubmit}>
  {/* 表单其他输入元素 */}
  <Button type="submit" color="primary" block> Add Exercise </Button>
</Form>

2. 实现handleFormSubmit函数：

handleFormSubmit = (e) => {
  // 1. 先执行你的addExercise自定义逻辑
  this.addExercise();

  // 2. 如果addExercise是同步逻辑，这里不需要额外操作，表单会自动执行默认提交
  // 3. 如果addExercise是异步操作（比如调用后端API），需要先阻止默认提交，等异步完成后手动提交：
  // e.preventDefault();
  // this.addExercise().then(() => {
  //   e.target.submit();
  // });
}

方案2：在按钮的onClick中手动触发表单提交 #

如果你坚持要保留按钮的onClick绑定，可以在addExercise函数里手动调用表单的提交方法：

1. 修改按钮的onClick传递事件参数：

<Button type="submit" color="primary" onClick={(e) => this.addExercise(e)} block> Add Exercise </Button>

2. 更新addExercise函数：

addExercise = (e) => {
  // 先阻止按钮的默认提交行为，避免冲突
  e.preventDefault();

  // 执行你的自定义业务逻辑
  // ...你的代码

  // 手动触发表单的默认提交流程
  e.target.form.submit();
}

关键注意点 #

• 如果addExercise包含异步操作（比如axios请求），一定要等异步操作完成后再调用submit()，否则会出现自定义逻辑还没执行完，表单已经提交的问题。
• 不要同时在按钮onClick和表单onSubmit中写重复逻辑，容易导致表单重复提交。

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