为什么React表单内两个绑定箭头函数的按钮只有一个会触发页面刷新？

你提到的「会修改状态的组件无法触发表单提交」的猜想不成立，两个按钮行为差异和状态修改逻辑没有关联，核心是HTML原生规则和组件渲染逻辑共同导致的：

• 初始渲染阶段页面只加载「Add Note」按钮，此时组件还未渲染，你提到的表单元素不存在，「Add Note」按钮根本不在表单内部，点击自然不会触发表单提交的默认行为。
• HTML中标签存在默认规则：位于
  标签内部且没有显式指定type属性的按钮，默认type为submit，点击时会自动触发表单提交，引发页面刷新；不在表单内部的按钮默认type为button，点击无额外默认行为。
• 点击「Add Note」触发状态更新后，组件才会渲染组件，此时「Submit Note」按钮才位于内部的表单中，你没有给按钮显式指定type="button"，它默认就是submit类型，即使绑定了onClick执行打印逻辑，原生的表单提交默认行为依然会执行，所以会出现打印后页面刷新的情况。

修复方案 #

有两种常用方法可以解决「Submit Note」点击刷新的问题：

1. 给Button组件的按钮显式指定默认type为button，避免默认提交行为：

const Button = ({handleClick, text, type = "button"}) => {
  return (
    <button type={type} onClick={handleClick}>{text}</button>
  )
}

2. 在submitNote处理函数中阻止事件默认行为：

const submitNote = (e) => {
  e.preventDefault()
  console.log('note submitted')
}

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