切换到编辑模式时触发表单提交事件

Question

我有一个 React 组件，可以显示用户数据并提供就地编辑数据的选项。

当我单击编辑按钮时，会触发表单提交操作。 我已将“编辑”按钮标记为

type: button

，但这种情况仍然不断发生。

组件 JSX

<form
  onSubmit={(event) => {
    event.preventDefault();
    console.log("Submit action triggered.");
  }}
>
  {isEdit ? (
    <div>
      <input type="text" defaultValue={obj.name} />
      <input type="text" defaultValue={obj.email} />
      <select defaultValue={obj.type}>
        <option value="user">User</option>
        <option value="admin">Admin</option>
      </select>
      <button type="submit">Save</button>
      <button type="reset" onClick={() => setIsEdit(false)}>
        Cancel
      </button>
    </div>
  ) : (
  <div>
    <span>{obj.name},</span>
    <span>{obj.email},</span>
    <span>{obj.type},</span>

    <button type="button" onClick={() => setIsEdit(true)}>
      Edit
    </button>
    <button type="button">Delete</button>
  </div>
  )}
</form>

这是codesandbox示例的链接，

https://codesandbox.io/s/form-click-jz9lfd

我发现解决此问题的一种方法是将

event.preventDefault()

放入编辑事件处理程序中。

我的问题是为什么编辑按钮上会触发表单提交事件？

Answer 1

在您的代码中，尽管表单内有 type="button" 的按钮，但表单提交的默认行为不会被覆盖。要阻止默认的表单提交行为，您需要在 onSubmit 处理程序中显式调用 event.preventDefault()。

当您调用 event.preventDefault() 时，它会阻止事件的默认操作发生，在本例中是表单提交。