如何动态禁用 Fluent UI 按钮？

Question

我目前正在与 Fluent UI buttons 合作。

我需要做的是根据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();
  }

}

但是 disabled 的更改似乎没有效果，按钮对更改没有反应。

如何让按钮在disabled变化时动态变化？

Answer 1

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();
  }

}

您没有使用任何状态变量，您可以使用状态变量和设置状态。 https://reactjs.org/docs/state-and-lifecycle.html

如何动态禁用 Fluent UI 按钮？

How can i dynamically disable a Fluent UI button?

reactjs

fluent-ui