0

我目前正在使用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();
  }

}

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

如何在更改时使按钮动态disabled更改？

4

1 回答 1

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

于 2020-06-26T08:59:58.950 回答