从按钮中删除禁用的 HTML 属性不允许单击它

Question

我的 React 应用程序中有这个按钮组件：

<button onClick={() =>alert('hi')} disabled={true}>test</button>

我预计什么时候会删除disabled浏览器中的属性，例如：

<button disabled>test</button>

到：

<button>test</button>

应该单击该按钮并且应该出现警报，但它没有发生。

为什么在浏览器内删除属性后按钮没有触发警报消息？

Answer 1

你<button>用 React 渲染的不是实际的 DOM 元素，而是一个内置组件，它在内部管理其状态。因此，当 props 或状态发生更改时，您传递给该组件的 props 仅会在 React 重新渲染时反映在 DOM 中。

但 React 不知道你删除了disabledDOM 中的属性。从react的角度来看，按钮仍然处于禁用状态，因此点击事件被抑制。当使用 React 管理 DOM 时，你不应该尝试从外部操作 DOM，因为 React 不会意识到任何更改，并且每次渲染都会覆盖它们。

此外，内置组件上的事件由 React 自己的事件处理来管理。因此，您传递给<button>组件的处理程序与直接将其提供给 DOM 元素的处理程序不同。