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

Question

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

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

只要表单出现验证错误，例如未填写必填字段，禁用的值为真。

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

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

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

Answer 1

你需要某种包装器，监听包装器上的点击事件，并在禁用的按钮上设置 pointer-events: none CSS（假设你希望它在 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>

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

make disabled button trigger onClick event in react

html

disabled-control

reactjs