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

Try

<form onSubmit={addNewPost}>