如何在React表单中添加不触发原有提交处理函数的第二个按钮

问题原因 #

HTML 规范默认规则：位于 <form> 标签内的按钮如果没有显式声明 type 属性，默认值为 submit，点击后会自动触发表单的 onSubmit 提交事件，这就是你的第二个按钮会触发submitHandler的原因。另外你提供的代码里第二个按钮标签存在拼写错误，把<button>写成了<buton>，需要先修正。

解决方法 #

只要对第二个按钮做两处修改即可：

• 显式设置 type="button"，取消默认的提交触发行为
• 绑定onClick事件指向你的自定义函数secondFunction

修正后的完整代码 #

import React, { useState } from "react";
import "./Form.css";

const Form = (props) => {
  const submitHandler = (event) => {
    event.preventDefault();
    console.log('Some console log now from Submit Hanlder')
  };

  const secondFunction = event =>{
    // 这里可以写你返回逻辑的代码
    console.log('Some other console log')
  }

  return (
    <form onSubmit={submitHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input type="text" />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input type="number" />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input type="date" />
        </div>
        <div className="new-expense__actions">
          <button type="submit">Submitting</button>
          {/* 修正后的第二个按钮 */}
          <button type="button" onClick={secondFunction}>Second button....</button>
        </div>
      </div>
    </form>
  );
};

export default Form;

内容的提问来源于stack exchange，提问作者Milán Nikolics