preventDefault 阻止默认行为

最后更新：2026-10-28

e.preventDefault() 阻止事件的浏览器默认动作，最典型的是表单提交导致的整页刷新。React 表单几乎都在 onSubmit 里先调用它，再用受控状态处理数据，实现单页内的无刷新提交。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

function handleSubmit(e) {
  e.preventDefault() // 阻止浏览器默认行为（如表单刷新页面）
  // 在这里用 state 处理提交
}
<form onSubmit={handleSubmit}>

e（事件对象）	React 合成事件；preventDefault 只能在处理函数同步执行期间调用，不能存起来延迟调用。

返回值：无返回值（undefined）；调用后该事件的浏览器默认行为不再发生。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

一个搜索表单：输入关键词点「搜索」，页面不刷新，下方显示「已搜索：xxx」；空内容提交则提示「请输入关键词」——默认的整页刷新被成功阻止。

⚠️ 注意 阻止页面刷新靠 e.preventDefault()，写 return false 在 React 里没有任何作用。

💡 提示 不想让表单里的普通按钮触发提交，把它设成 type="button" 也能避免默认行为。

ℹ️ 说明 preventDefault 阻止默认动作，stopPropagation 阻止事件冒泡，两者互相独立、按需选用。

更多案例整理中，敬请期待。

Q React 表单提交为什么刷新页面？

A 因为浏览器对表单提交有默认行为。在 onSubmit 处理函数第一行调用 e.preventDefault() 即可阻止刷新，改用 state 处理数据。

Q e.preventDefault() 是干什么的？

A 它取消事件的浏览器默认动作：表单不刷新、a 标签不跳转、右键不弹菜单等，只取消默认行为不影响事件继续传播。

Q preventDefault 和 stopPropagation 有什么区别？

A 前者阻止「默认动作」（如刷新页面），后者阻止「事件继续向上冒泡」到父元素；两者互不影响，可以同时调用。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。