在React JS中更改状态以使按钮从禁用位置启用

我的孩子上课有这个完成按钮... 我试图在单击完成按钮时更改禁用按钮的状态

{currentQuest === Quizdata.length - 1 && (
    <Button
      onClick={() => {
        this.finishQuiz();
        this.pushtoDB2();
        //  this.disableCheckLevel();
        this.props.handleDisableValue(scores); // child to parent
      }}
    >
      Finish
    </Button>
)}

我有4个按钮可将状态更改为false,单击完成按钮可启用单击。 我有一个菜鸟按钮,学生,中级,专家,主按钮。 但我想按此顺序更改状态。 说如果我是菜鸟,则只有在启用了菜鸟并且分数> = 5时才能启用学生 然后启用学生。如果启用了学生并且分数> = 5,则启用中级,否则保持相同状态。直到主按钮 我遇到的问题是,我的工作从菜鸟到学生,却再也没有。

这是我用来禁用状态的逻辑

disabledRook: true,
disabledStudent: true,
disabledInterm: true,
disabledExpert: true,
disabledMaster: true,

//初始状态值

handleDisableValue = scores => {
    if (this.state.disabledRook && scores >= 5) {
      this.setState({
        disabledStudent: false
      });
    } else if (this.state.disabledStudent === false && scores >= 5) {
      this.setState({
        disabledInterm: false
      });
    } else if (this.state.disabledInterm === false && scores >= 5) {
      this.setState({
        disabledExpert: false
      });
    } else if (this.state.disabledExpert === false && scores >= 5) {
      this.setState({
        disabledMaster: false
      });
    } else if (this.state.disabledRook && scores < 5) {
      this.setState({
        disabledRook: true
      });
    } else if (this.state.disabledStudent && scores < 5) {
      this.setState({
        disabledStudent: true
      });
    } else if (this.state.disabledInterm && scores < 5) {
      this.setState({
        disabledInterm: true
      });
    } else if (this.state.disabledExpert && scores < 5) {
      this.setState({
        disabledExpert: true
      });
    } else if (this.state.disabledMaster && scores < 5) {
      this.setState({
        disabledMaster: true
      });
    }

这是我在创建的按钮中调用状态的地方

<Button
  onClick={() => {
    this.changeToquiz1();
    this.articelState();
  }}
>
  Rookie
</Button>
<Button
  disabled={this.state.disabledStudent}
  onClick={() => {
    this.articelState();
    this.changeToquiz2();
  }}
>
  Student
</Button>
<Button
  disabled={this.state.disabledInterm}
  onClick={() => {
    this.changeToquiz3();
    this.articelState();
  }}
>
  Intermediate
</Button>
<Button
  disabled={this.state.disabledExpert}
  onClick={() => {
    this.changeToquiz4();
    this.articelState();
  }}
>
  Expert
</Button>
<Button
  disabled={this.state.disabledMaster}
  onClick={() => {
    this.changeToquiz5();
    this.articelState();
  }}
>
  Master
</Button>

任何帮助谢谢

评论