javascript - 如何在给定谓词的情况下禁用按钮

Question

我不知道我在哪里做错了，但看起来很奇怪。当我切换 cckeckbox 时，我在数组中添加项目，并根据该数组我希望禁用或不禁用我的按钮。如果为空则禁用，否则激活。项目肯定会添加到数组中。当我添加时，它确实会激活一次，但如果我取消选中它，它不会被禁用。可能是什么问题？

activateButton() {
// arrayOfStatusId is an array 
if (this.state.arrayOfStatusId) { 
  this.setState({
    isButtonActive: false,
  })
} else{
   this.setState({
    isButtonActive: true,
  })
}
}


<Checkbox
  onClick={() => this.selectAllRespondents()}
  onChange={() => this.activateButton()}
/>

selectAllRespondents() {
    const { data, arrayOfStatusId, isCheckedAll } = this.state
    this.setState({
      isCheckedAll: !this.state.isCheckedAll,
    })
    if (!isCheckedAll) {
      for (let i = 0; i < data.length; i++) {
        arrayOfStatusId.push(data[i].status_id)
      }
    } else {
      this.setState({
        arrayOfStatusId: [],
      })
    }
  }

<Button disabled={isButtonActive}>
   ADD
</Button>

Answer 1

根据您的代码，我认为您应该检查 this.state.arrayOfStatusId && this.state.arrayOfStatusId.length。因为如果 arrayOfStatusId 是一个数组，它将始终评估 true，导致 isButtonActive false 始终。

activateButton () => {
    // arrayOfStatusId is an array 
    if (this.state.arrayOfStatusId && this.state.arrayOfStatusId.length) { 
        this.setState({
            isButtonActive: false,
        })
    } else{
       this.setState({
           isButtonActive: true,
       })
    }
}


<Checkbox
  onClick={() => this.selectAllRespondents()}
  onChange={this.activateButton}
/>



<Button disabled={this.state.isButtonActive}>
    ADD
</Button>

此外，如果您使用 activateButton 函数更改 this.state.isButtonActive 的值，并且该值仅用作 Button 的属性> 您还可以删除 activateButton 函数:

<Checkbox
  onClick={() => this.selectAllRespondents()}
/>

<Button disabled={this.state.arrayOfStatusId && this.state.arrayOfStatusId.length}>
    ADD
</Button>