Reactjs 如何动态禁用Fluent UI按钮？

我目前正在与

我需要做的是根据

disabled

标志在按钮的正常和禁用状态之间动态切换。我试着做到以下几点：

import { PrimaryButton as FluentUIButton } from 'office-ui-fabric-react';

export class App extends React.Component {

  disabled: boolean = false;

  render() {  
    return (
       <FluentUIButton text={"Click me!"} disabled={this.disabled} />
    );
  }

  invert() {
    setTimeout( () => {
      this.disabled = !this.disabled;
      this.invert();
    }, 2000)
  }

  componentWillMount() {
    this.invert();
  }

}

从“office ui fabric react”导入{PrimaryButton as FluentUIButton}；
导出类应用程序扩展React.Component{
禁用：布尔值=false；
render（）{
返回(
);
}
倒置{
设置超时（（）=>{
this.disabled=！this.disabled；
这个.invert（）；
}, 2000)
}
组件willmount（）{
这个.invert（）；
}
}

但是，

禁用

的更改似乎没有效果，并且按钮对更改没有反应

当禁用

时，如何使按钮动态更改
更改？
从“office ui fabric react”导入{PrimaryButton as FluentUIButton}；
import { PrimaryButton as FluentUIButton } from 'office-ui-fabric-react';

export class App extends React.Component {

  this.state = {disabled:false};

  render() {  
    return (
       <FluentUIButton text={"Click me!"} disabled={this.state.disabled} />
    );
  }

  invert() {
    setTimeout( () => {
      this.setState({disabled:true})
    }, 2000)
  }

  componentWillMount() {
    this.invert();
  }

}

导出类应用程序扩展React.Component{
this.state={disabled:false}；
render（）{
返回(
);
}
倒置{
设置超时（（）=>{
this.setState（{disabled:true}）
}, 2000)
}
组件willmount（）{
这个.invert（）；
}
}

您没有使用任何状态变量使用状态变量并设置状态，您可以这样做。