React 表单内未指定类型的按钮默认触发提交，导致页面刷新、控制台日志瞬间消失；只需将按钮显式设为 type="button" 即可阻止默认行为。
react 表单内未指定类型的按钮默认触发提交，导致页面刷新、控制台日志瞬间消失；只需将按钮显式设为 `type="button"` 即可阻止默认行为。
在 React 开发中，你可能会遇到这样一个看似神秘的现象：点击按钮后，console.log() 确实执行了，控制台短暂显示日志（如 'hello'），但不到一秒便消失——日志被清空，仿佛页面重载了一般。这并非浏览器 Bug 或开发工具异常，而是由 HTML 表单的默认提交行为引发的经典问题。
根本原因在于：位于 <form></form> 标签内的 <button></button> 元素，若未显式声明 type 属性，其默认类型为 submit。一旦点击，表单会立即提交（即使没有 onSubmit 处理函数或 action 属性），触发页面整页刷新（或跳转到当前 URL），从而清空控制台输出。
✅ 正确做法是：为非提交用途的按钮显式添加 type="button"，明确告知浏览器“此按钮不参与表单提交”。
以下是修复后的关键代码片段：
⚠️ 注意事项：
- ❌ 错误写法：
onClick={console.log('hello')}—— 这会在组件渲染时立即执行console.log，而非点击时，且无法阻止表单提交； - ✅ 正确写法：
onClick={() => console.log('hello')}—— 使用箭头函数延迟执行，确保仅在点击时触发； - 若该按钮本意是提交表单，请改用
<form onsubmit="{handleSubmit}"></form>并在handleSubmit中调用event.preventDefault()，而非依赖按钮类型； - 即使表单无
action或onSubmit，浏览器仍会执行默认提交（GET 当前 URL），造成刷新。
? 小结：在 React 表单中，所有非提交功能的按钮都应显式设置 type="button"。这是防御性编码的重要实践，能避免意外刷新、状态丢失及调试困难。养成检查按钮 type 的习惯，将显著提升开发效率与应用稳定性。
