Javascript 尽管被告知不要刷新页面，但仍会做出反应

我在react项目中有一个表单，它的行为有点奇怪。我已将e.preventDefault（）附加到我的提交按钮，但由于某些原因，每次单击按钮时页面仍在刷新。有人能帮我弄清楚为什么会这样吗？以下是所讨论的组件：

import React, { useState } from 'react';
import './PostForm.css';
import axios from 'axios'

const PostForm = () => {

  const [posts, setPost] = useState({
    body: '',
    author: 'Michael',
  });

const onChange = (e) =>{
    setPost({...posts, [e.target.name] : e.target.value})

}

const sendPost = (e) => {
  e.preventDefault()
  try {
    const res = axios.post('http://localhost:4000/post', posts);
  console.log(res)
  } catch (error) {
    console.log(error)
    
  }
  
}

  return (
    <form className="formContainer">
      <div className="form">
        <textarea className='formBody' type="text" placeholder="What's new?" name='body' onChange={onChange} />
       
        <button onSubmit={sendPost}>Share</button>
      </div>
    </form>
  );
};

export default PostForm;

import React，{useState}来自“React”；
导入“/PostForm.css”；
从“axios”导入axios
常量PostForm=（）=>{
const[posts，setPost]=useState({
正文：“”，
作者：《迈克尔》，
});
const onChange=（e）=>{
setPost（{…posts[e.target.name]：e.target.value}）
}
const sendPost=（e）=>{
e、 预防默认值（）
试一试{
常数res=axios.post（'http://localhost:4000/post",职位),；
console.log（res）
}捕获（错误）{
console.log（错误）
}
}
返回(
共有
);
};
导出默认PostForm；

提交应在表单标记中。并将按钮更改为“输入”，其类型为“提交”

    <form className="formContainer" onSubmit={sendPost}>
      <div className="form">
        <textarea className='formBody' type="text" placeholder="What's new?" name='body' onChange={onChange} />
        <input type="submit" value="Share" />
      </div>
    </form>

onSubmit
需要在
上，而不是一些随机的
。非常感谢……这就是这样的小事情。我在我的应用程序中还有一些其他表单，我没有将它们标记为表单，因此它们在上面的布局中按预期工作。我不知道有什么不同。