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

Question

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

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

我预计何时会在浏览器中删除disabled属性，例如：

<button disabled>test</button>

到：

<button>test</button>

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

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

Answer 1

你用 react 渲染的<button>不是实际的 DOM 元素，而是一个内置组件，它在内部管理它的 state。 因此，当 props 或 state 发生变化时，您传递给该组件的道具只会在 React 重新渲染时反映在 DOM 中。

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

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

Answer 2

根据您的代码，我可以看到您没有删除disabled属性。 您只删除了{true}部分。 保留disabled属性，即使它没有设置为 true，仍然会禁用按钮，这就是它没有被触发的原因。 尝试这个：-

<button onClick={() => alert("hi")}>test</button>