Javascript 根据地图值启用按钮

我有一个组件，它通过一个签出按钮将书籍列表呈现到引导卡中。我有一个状态为结帐按钮称为禁用

仅当

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>
    );
}

构造函数（道具）{
超级（道具）
此.state={
书籍：[]，
消息：空，
残疾人士：对
}
}
render（）{
返回(
{
这个。州。书。地图(
书籍=>
{books.title}
{books.author.firstName+“”+books.author.lastName}
{books.quantity}
结账
)
}
);
}

您可以在

禁用属性中添加以下内容：

<Button disabled={books.quantity > 0} variant="primary">Checkout</Button> 

0}variant=“primary”>签出

这将检查
books.quantity>0的值，并在语句为
true
时启用该按钮