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

Question

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

这是我的删除按钮代码：

<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>