我有两个按钮，一个是“按钮”类型，一个是“提交”类型，两者都包装在表单中并且相互切换。奇怪的是，如果我单击“按钮”类型的按钮，则会提交表单，而如果我单击“提交”类型的按钮，则不会提交表单。
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
function App() {
const [clicked, setClicked] = React.useState(false);
return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log("form submitted!");
}}
>
{!clicked ? (
<button type="button" onClick={() => setClicked(true)}>
Button 1
</button>
) : (
<button type="submit" onClick={() => setClicked(false)}>
Button 2
</button>
)}
</form>
);
}
root.render(
<App />
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>我预计提交表格时的情况恰恰相反。