在单击提交按钮之前反应表单提交

Question

我有一个非常简单的 React 应用程序，它表现出奇怪的行为：

import { useState } from 'react'

export function App(props) {
  const [ready, setReady] = useState(false)

  function handleSubmit(e) {
    e.preventDefault()
    alert("Submitted!")
  }

  return (
    <form onSubmit={handleSubmit}>
      { ready ?
      <button type="submit">Submit</button> :
      <button type="button" onClick={() => setReady(true)}>Next</button> }
    </form>
  )
}

^{https://playcode.io/1741452}

当我单击“下一步”按钮时，我希望出现“提交”按钮，但会触发表单的

onSubmit

处理程序！由于从未点击“提交”按钮，导致这种情况发生的原因是什么？

Answer 1

按如下方式更新您的按钮：

<button type="button" onClick={(e) => {
  e.preventDefault()
  setReady(true)
}}>Next</button>

需要为每个按钮事件设置“e.preventDefault()”。