根据地图值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，则启用按钮。