时间戳

首页 > 解决方案 > disabled={true} HTML 按钮属性在 JavaScript + React 中无法正常工作

javascript - disabled={true} HTML 按钮属性在 JavaScript + React 中无法正常工作

问题描述

disabled={true} HTML 按钮有问题。应用程序是 JavaScript + React。我设置了按钮初始值disabled={true}。例如，我将其称为 id="button1"。一旦我单击另一个按钮，假设 id=button2，我重新启用我button1的 with code document.getElementById('button1').disabled=false;。按钮重新启用，但一旦单击它就没有任何功能，看起来它仍然被禁用。我究竟做错了什么 ？

好的，这是我的简化代码：

 function App() {

  const approve = () => {
    console.log('test');
    
  };

  const filterWeek2 = () => {
    document.getElementById('approve').removeAttribute("disabled");
  };


  return (
    <div className="App">
          <nav>
            <ul className="nav-area">
              <li><button id="Week2" onClick={filterWeek2}>WEEK 2</button></li>
              <li><button id="approve" onClick={approve} disabled="disabled">APPROVE</button></li> 
            </ul>            
          </nav>    
        </div>
  );
}

export default withAuthenticator(App);

标签： javascripthtmlreactjs

解决方案

disabled是一个布尔属性，它在 HTML 元素上的存在会禁用该元素。如果它出现在元素上，它将禁用 HTML 元素，不管它有什么值。

您必须删除属性 usingremoveAttribute使其可编辑

const disabled = document.querySelector(".disabled");
const normal = document.querySelector(".normal");

normal.addEventListener("click", () => {
  if (disabled.hasAttribute("disabled")) disabled.removeAttribute("disabled");
  else disabled.setAttribute("disabled", true);
})
<button disabled class="disabled">button</button>
<button class="normal">toggle</button>

由于您使用的是 React，因此您可以disabled使用状态进行切换。演示

disabled={active}

如果active是true，则禁用 HTML 元素，否则启用。

推荐阅读