第二次单击按钮，得到不同的结果

Posted 2023-02-22

【中文标题】第二次单击按钮，得到不同的结果

【英文标题】：clicking a button second time, getting different result

【发布时间】：2022-01-19 14:47:53

【问题描述】：

当第二次单击按钮（材质 ui）时，我希望禁用该按钮（disabled=true）。我在 *** 上没有找到任何与此相关的示例。

<Button
  onClick=this.startDraw.bind(this)
  disabled=
  startIcon=<Brush />
>

起初，按钮是可点击的。当它被点击时，会发生一些事情，但是当第二次点击同一个按钮时，该按钮应该被禁用（不能再被点击）。

【问题讨论】：

尝试为这个按钮创建一个计数器状态，当状态变为2时禁用它。禁用=counterState == 2

@WaleedJubeh 你能提供工作示例吗？

replit.com/join/kdwzrqpsuh-waleedjubeh

【参考方案1】：

类组件使用

    state = 
    count: 0
    ;
this.setState( count: count + 1 ); // use this on your button click

对于按钮部分

   <Button
    onClick=this.startDraw.bind(this)
    disabled=count == 2
    startIcon=<Brush />
  />

对于功能组件使用这种方法

   const [count , setCount ] = useState(0);
   setCount(count + 1) // use this on your button call

    <Button
    onClick=this.startDraw.bind(this)
    disabled=count == 2
    startIcon=<Brush />
/>

【讨论】：

这里说 count 没有定义 ' count: count + 1 ' 错误出现在第二个计数上

你使用的是类组件还是函数组件？