如何解决根据地图值React启用按钮
我有一个组件,可通过结帐按钮将书籍列表呈现到引导卡中。我有一个称为“已禁用”的结帐按钮的状态。
我只想在books.quantity>0
时启用按钮。如何成功更改此按钮的状态?
constructor(props) {
super(props)
this.state = {
books: [],message: null,disabled: true
}
}
render() {
return (
<Container fluid>
<Row>
{
this.state.books.map(
books =>
<Col key={books.id} sm="2">
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="http://res.freestockphotos.biz/pictures/14/14301-illustration-of-a-book-pv.png" />
<Card.Body>
<Card.Title>{books.title}</Card.Title>
<Card.Subtitle> {books.author.firstName + " " + books.author.lastName} </Card.Subtitle>
<Card.Subtitle > {books.quantity} </Card.Subtitle>
<Button disabled={this.state.disabled} variant="primary" >Checkout</Button>
</Card.Body>
</Card>
</Col>
)
}
</Row>
</Container>
);
}
解决方法
您可以将以下内容添加到disabled
属性中:
<Button disabled={books.quantity > 0} variant="primary">Checkout</Button>
这将检查books.quantity > 0
的值,如果语句为true
,则启用按钮。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。