JavaScript+React中disabled={true}按钮启用后点击无响应问题

• React是状态驱动UI的框架，所有UI层面的变更都应该通过React状态来控制，不建议直接操作原生DOM修改元素属性。
• 你代码中初始给APPROVE按钮的disabled属性是写死的静态值，React首次渲染完成后，你用原生JS删除了真实DOM的disabled属性，但React内部维护的虚拟DOM中该按钮仍然标记为禁用状态，无法同步到你手动修改的真实DOM变更，导致点击事件逻辑没有正确生效，就出现了外观可点击但无响应的问题。同时如果后续组件触发重渲染，React会按照虚拟DOM的状态重新渲染按钮，你手动修改的DOM属性会被直接覆盖。

使用React内置的useState钩子来管理按钮的禁用状态，修改后代码如下：

import { useState } from 'react';

function App() {
  // 声明状态控制approve按钮是否禁用，初始值为true
  const [isApproveDisabled, setIsApproveDisabled] = useState(true);

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

  const filterWeek2 = () => {
    // 修改状态触发UI更新，React会自动同步按钮的disabled属性
    setIsApproveDisabled(false);
  };

  return (
    <div className="App">
      <nav>
        <ul className="nav-area">
          <li><button id="Week2" onClick={filterWeek2}>WEEK 2</button></li>
          {/* disabled属性绑定状态变量，由状态驱动UI变更 */}
          <li><button id="approve" onClick={approve} disabled={isApproveDisabled}>APPROVE</button></li> 
        </ul>            
      </nav>    
    </div>
  );
}

export default withAuthenticator(App);

内容的提问来源于stack exchange，提问作者Min