reactjs 每次状态更改时,react表单都会提交

x6yk4ghg  于 2023-06-05  发布在  React
关注(0)|答案(2)|浏览(212)

所以我有一个表单,它将formData发送给API,像这样:

const [state, setState] = useState(true)

const handleSubmit = async e => {
  const destination = state ? true : false
  // Sends FormData to api
}

return (
  <form onSumbit={handleSubmit}>
    <div>
      <button onClick={() => setState(prev => !prev)}>click</button
      <button onClick={() => setState(prev => !prev)}>click</button
    </div>

    // some more inputs here

    <input type="submit" value="Upload" />
  </form>

每次状态更改时,它都会尝试再次提交。它只对submitHandler中用于计算destination的状态执行此操作。我也尝试将destination移动到submitHandler之外,但结果是一样的。

bq3bfh9z

bq3bfh9z1#

您需要在prev/next按钮上添加type="button"https://playcode.io/1495308

<button type="button" onClick={() => setState(prev => !prev)}>click</button>

HTML表单默认假定按钮是提交按钮:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#additional_attributes

fv2wmkja

fv2wmkja2#

您遇到的问题,即表单在每次状态更改时都试图再次提交,可能是由于React的重新呈现行为。由于状态更新触发了re-render,表单onSubmit事件再次被注册,并导致另一次提交尝试。
为了防止这种行为,您可以通过向button元素添加type=“button”来对代码进行小的调整。How to prevent buttons from submitting forms

相关问题