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按钮？

1 个答案: