React点击Remove按钮后应用重载问题及原因咨询

这问题本质是浏览器对表单内按钮的默认行为处理导致的：

• 你把Remove按钮放在了<form>标签里面，而HTML里的<button>元素默认type是submit。当点击这类按钮时，浏览器会自动触发表单的提交行为——如果表单没指定action属性，就会刷新当前页面，也就是你看到的应用重载。
• 你的删除行逻辑本身是对的，但浏览器的默认表单提交行为优先级更高，页面直接刷新了，导致删除效果没机会展示出来。

而你加的e.preventDefault()刚好解决了这个问题：它会阻止当前事件的默认行为，也就是取消了表单提交动作，这样页面就不会重载，你的删除行逻辑就能正常执行了。

另外还有更直接的解决方式：给Remove按钮显式设置type="button"，比如：

<button type="button" onClick={handleRemove}>Remove</button>

这样浏览器就不会把它识别为提交按钮，自然就不会触发表单提交，不用每次都写e.preventDefault()。

内容的提问来源于stack exchange，提问作者Usman Sajid