如何通过useState修改Ant Design Button的disabled禁用状态

问题原因 #

你当前的写法本身支持响应clicked状态变化，状态未更新大概率是没有将clickedLink函数绑定到「Click Here」按钮的onClick事件上；另外重复声明两个Button的写法可以优化，不需要做完整的组件条件渲染，直接动态绑定disabled属性即可。

修复实现方案 #

• 给「Click Here」按钮绑定onClick事件，触发状态更新逻辑
• 优化Continue按钮写法，直接通过状态控制disabled属性值，减少冗余代码

import { useState } from 'react';
// 假设你的Button组件、links、buttonStyle2已提前正确引入/声明

function YourComponent() {
  const [clicked, setClicked] = useState(false); 
  // 点击事件函数，直接传布尔值即可，无需额外使用函数式更新
  const handleClickHere = () => setClicked(true);

  return (
    <div>
      {/* 「Click Here」按钮必须绑定onClick事件才能触发状态更新 */}
      <Button onClick={handleClickHere}>Click Here</Button>
      
      {/* 动态绑定disabled属性，组件重渲染时会自动读取最新的clicked值 */}
      <Button 
        href={links[0]} 
        target="_blank" 
        style={buttonStyle2} 
        disabled={!clicked}
      >
        Continue
      </Button>
    </div>
  )
}

React的状态更新会自动触发组件重渲染，disabled={!clicked}会在每次重渲染时自动读取最新的clicked值，不需要额外做监听操作。

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