e.preventDefault(); 不工作（React.js）

Question

如何阻止表单提交实际提交页面？

我试过e.stopPropagation(); 和e.nativeEvent.stopImmediatePropagation(); 但它并没有阻止表单提交页面

import React,{useState,useRef} from 'react';
import Counter from './components/Counter';
import Сlasscounter from './components/Classcounter';
import './styles/APP.css';
import Postlist from './components/Postlist';
 import Postitem from "./components/Postitem";
 import Mybutton from "./components/UI/button/Mybutton";
 import Myinput from "./components/UI/input/Myinput";
function App() {
 const [post,setpost]=useState([
  {id:1,title:'kickstart',body:'beginner'},
  {id:2,title:'backend',body:'back'},
  {id:3,title:'frontend',body:'description'},
  {id:4,title:'fullstack',body:'description'},
  {id:5,title:'architets',body:'description'},
  {id:6,title:'coding',body:'description'}
 ])
 const [title,setTitle]=useState('');
 const [body,setBody]=useState('');
 const addNewPost=function(e){
  /* e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation(); */
  e.preventDefault();
   const newpost={
     title,
     body
   };
 console.log(newpost);
 };
  return (
    <div className="App">
       <form>
         <Myinput     
          value={title}
          onChange={e => setTitle(e.target.value)}
          type="text"
           placeholder="Description"/>
         <Myinput 
          type="text"
          placeholder="Description"
          value={body}
          onChange={e => setBody(e.target.value)}
          type="text"
           placeholder="Description"/>
          <Mybutton onclick={addNewPost}>Створити пост</Mybutton>       
       </form>
    </div>
  );
}
export default App;

问题是我点击按钮后一切都刷新了

Answer 1

尝试

<form onSubmit={addNewPost}>