禁用删除按钮，直到在 react.js 中创建新卡

Question

我有这个组件，它可以添加具有不同输入值的多张卡片。我有一个删除按钮，可以删除创建的最新卡。我希望在单击和 onkeypress 时禁用删除按钮，直到有不止一张卡。删除按钮似乎是一个有效的工作按钮，但如果只有一张卡，它实际上什么都不做。任何帮助都非常感谢。

这是删除按钮的代码：

 <Button
              onClick={props.deleteCard.bind(null, props.i)}
              aria-label='Remove Card' disabled={props.isLoading}><Icon name='trash' aria/>
            </Button>

添加新卡按钮的代码：

<Button className='btn-confirm'
                                onClick={this.addCard} disabled={!!this.state.loading}>Add Card
                              </Button>

两者的功能：

addCard = () => {
    this.setState((prevState) => {
      const {particles, errors} = prevState
      particles.push({type: 'constant', distributionType: 'uniform', fields: ['', '']})
      errors.particles.push([null, null, null])

      return {particles, errors}
    })
  }

  deleteCard = (index) => {
    if (this.state.particles.length <= 1) {
      return this.setState((prevState) => {
        const {particles, errors} = prevState
        particles[0] = {type: 'constant', distributionType: 'uniform', fields: ['', '']}
        errors.particles[0] = [null, null, null]

        return {particles, errors}
      })
    }

谢谢！

Answer 1

将disabled 条件添加到您的删除按钮，如下所示：

            <Button
                onClick={props.deleteCard.bind(null, props.i)}
                aria-label='Remove Card' 
                disabled={props.isLoading || props.particles.length > 1}>
              <Icon name='trash' aria/>
            </Button>