React表单与事件处理：编辑按钮触发提交的坑

在React应用开发中，表单处理和事件处理是常见的操作，开发者常常会遇到一些看似简单但却让人困惑的问题。今天，我们来探讨一个常见的问题：为什么点击编辑按钮会触发表单的提交事件？让我们通过一个实例来详细分析这个问题，并提供解决方案。

问题背景

假设我们有一个用户数据显示组件，其中包括一个表单，当用户点击“编辑”按钮时，表单应该切换到编辑模式，允许用户修改数据。然而，问题出现了，每次点击“编辑”按钮，表单的提交事件却被触发了。

<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