React中表单内按钮是否自动为提交按钮？遇异常行为求助

问题根源 #

在HTML的<form>标签内部，<button>元素默认的type属性是submit——哪怕你没显式声明，点击它也会触发表单的默认提交行为，导致页面刷新。这就是为什么你的handleSubmit函数里的代码看似没执行：实际上代码可能刚运行到一半，页面就已经刷新了，自然看不到预期效果。

解决方案 #

方案1：给按钮显式设置type="button"

这是最直接的解决方式，明确告诉浏览器这个按钮是普通按钮，不会触发表单提交：

<button
    type="button"
    className="button is-dark" {/* React里要用className替代class */}
    onClick={(e) => handleSubmit(e, listItem.album.albumid, document.getElementById('scoreNum'+ listItem.index).value, listItem.index)}
    disabled={setDisabledInputs()}
>
    Submit
</button>

方案2：在handleSubmit中阻止默认行为

如果暂时不想修改按钮类型，也可以在函数开头调用event.preventDefault()，阻止表单的默认提交动作：

const handleSubmit = (event, albumid, rating, item) => {
    event.preventDefault(); // 阻止页面刷新
    document.getElementById('scoreNum' + item).removeAttribute("value");
    // 其他逻辑...
}

为什么onClear能正常工作？ #

因为onClear绑定的按钮要么不在表单内部，要么已经被设置为type="button"，没有触发表单的默认提交行为，所以页面不会刷新，代码能完整执行。

额外建议 #

在React开发中，尽量避免直接用document.getElementById操作DOM，推荐用**状态（state）**来管理表单元素的值。比如用useState维护评分输入框的值，这样既符合React的单向数据流，也能避免DOM操作带来的意外问题。

内容的提问来源于stack exchange，提问作者Alec VanLandingham