React.js中e.preventDefault()不生效，表单提交导致页面刷新如何解决？

开发者阿泽

2026-9-29

问题原因及解决方法

核心错误点

事件绑定属性名拼写错误：React 中所有事件绑定属性都遵循驼峰命名规范，你代码中给自定义按钮组件绑定的是小写的onclick，正确写法应为onClick。由于属性名不匹配，点击按钮时addNewPost处理函数根本没有执行，函数内的e.preventDefault()也没有生效，表单触发了默认的提交刷新行为。
补充：表单默认提交行为的触发条件包含「点击表单内type为submit的按钮」、「输入框按回车」两种，仅给按钮绑定点击事件覆盖场景不全。

修复方案

方案1：修正按钮事件绑定拼写

将按钮的onclick改为onClick即可：

<Mybutton onClick={addNewPost}>Створити пост</Mybutton>

方案2（更推荐）：给表单绑定onSubmit事件

直接在form标签上绑定提交事件，覆盖所有表单提交场景，无需依赖按钮的点击事件：

// 修改addNewPost为表单提交处理函数，调用e.preventDefault()拦截默认行为
const addNewPost=function(e){
  e.preventDefault();
  const newpost={
    title,
    body,
    id: Date.now() // 补充id避免后续列表渲染报错
  };
  console.log(newpost);
  // 可自行添加逻辑把新post加入原数组更新视图
  // setpost([...post, newpost])
};

return (
  <div className="App">
     {/* 给form绑定onSubmit */}
     <form onSubmit={addNewPost}>
       <Myinput     
        value={title}
        onChange={e => setTitle(e.target.value)}
        type="text"
        placeholder="帖子标题"/>
       <Myinput 
        type="text"
        value={body}
        onChange={e => setBody(e.target.value)}
        placeholder="帖子描述"/>
        {/* 按钮可以去掉点击事件，默认作为表单提交按钮即可，也可以显式加type="submit" */}
        <Mybutton type="submit">Створити пост</Mybutton>       
     </form>
  </div>
);