使禁用按钮触发 onClick 事件反应

【问题标题】：make disabled button trigger onClick event in react使禁用按钮触发 onClick 事件反应
【发布时间】：2021-11-01 09:35:20
【问题描述】：

我在反应表单的底部有一个保存按钮。那个按钮是这样的：

<button type="button" onClick={saveHandler} disabled={disabled}>Save</button>

当表单上出现验证错误时，disabled 值为 true，例如未填写必填字段。

除非您关注它们，否则我不会在必填字段上显示错误消息，这样表单就不会从一开始就充满错误消息。

如果用户只是跳到页面底部，然后单击保存按钮，但是当它被禁用时，即使按钮被禁用，我希望它仍然调用 saveHandler。在这种情况下，我会将未填写的字段的所有错误都显示出来。

有没有办法让禁用的字段在单击时触发 onClick 事件？

【问题讨论】：

标签： html reactjs disabled-control

【解决方案1】：

您需要某种包装器，监听包装器上的点击事件，并在禁用的按钮 CSS 上设置pointer-events: none（假设您希望它在 Firefox 中工作，很确定即使在 Chrome 中没有它也能工作）。不是反应，而是演示：

document.getElementById('wrapper').addEventListener('click', function() { console.log('wrapper'); });
document.getElementById('button').addEventListener('click', function() { console.log('button'); });
document.getElementById('disabler').addEventListener('click', function() { document.getElementById('button').disabled = !document.getElementById('button').disabled});

[disabled] {
    pointer-events: none;
}

<label><input type="checkbox" checked id="disabler"/> Disabled</label>
<span id="wrapper"><button id="button" disabled>Click</button></span>

【讨论】：