如何更新按钮的disabled属性？变量更新后状态未同步问题

你的问题出在使用普通变量isDisabled控制状态——普通变量的更新不会触发React组件重新渲染，React无法感知到这种变化，所以即便你把isDisabled改成false，页面也不会同步更新，按钮的disabled属性自然不会移除。

解决方法是用React提供的useState钩子管理状态，状态更新时会自动触发组件重渲染，从而让UI同步变化：

import { useState } from 'react';

// ...

const [isDisabled, setIsDisabled] = useState(true);

return (
    <>
        <button onClick={() => setIsDisabled(false)}>Enable Second Button</button>
        <button disabled={isDisabled}>Second Button</button>    
    </>
)

关键改动说明：

• 用useState声明响应式状态，初始值设为true
• 更新状态时调用setIsDisabled方法，而非直接修改变量——这是React状态更新的标准方式，能确保组件感知到变化并重新渲染

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