javascript - React On 循环打开模态

Question

嗨，我正在学习 ReactJS，现在我在循环中遇到了 Modal 的困难。

我的问题是，我的模式没有显示。

这是我当前的代码:

state = {
    modal: false,
    modal_backdrop: false,
    modal_nested_parent: false,
    modal_nested: false,
    backdrop: true,
};

toggle = modalType => () => {
    if (!modalType) {
        console.log(this.state.modal);
        return this.setState({
            modal: !this.state.modal,
        });
    }

    this.setState({
        [`modal_${modalType}`]: !this.state[`modal_${modalType}`],
    });
};

render() {
    let bookItems = [];
    let modalItems = [];
    for (var i = 1; i < 17; i++) {
        bookItems.push(<Col lg="3" md="6" sm="6" xs="12" className="mb-3">
            <a href="#" onClick={this.toggle()}>
                <Card inverse color="dark">
                    <CardBody>
                        <CardTitle className="text-capitalize">
                            <center>{i}</center>
                        </CardTitle>
                    </CardBody>
                </Card>
            </a>
        </Col>);

        modalItems.push(<Modal
            isOpen={this.state.modal}
            toggle={this.toggle()}
            className={this.props.className}
        >
            <ModalHeader toggle={this.toggle()}>{i}</ModalHeader>
            <ModalBody>
                Lorem ipsum dolor sit amet.
            </ModalBody>
            <ModalFooter>
                <Button color="primary" onClick={this.toggle()}>
                    Do Something
                </Button>{' '}
                <Button color="secondary" onClick={this.toggle()}>
                    Cancel
                </Button>
            </ModalFooter>
        </Modal>);
    }

如何显示具有特定 id 的模态？因为我的模式目前不起作用。

我正在使用这个https://github.com/reduction-admin/react-reduction模板。

任何帮助将不胜感激。

已编辑

这是我当前的返回代码:

 return (
        <Page title="Modals" breadcrumbs={[{ name: 'modals', active: true }]}>
            <Row>
                <Col md="12" sm="12" xs="12">
                    <Card>
                        <CardHeader>Modal</CardHeader>
                        <CardBody>
                            <Row>
                                {bookItems}
                            </Row>
                                {modalItems}
                        </CardBody>
                    </Card>
                </Col>
            </Row>
        </Page>
    );

Answer 1

看起来您没有显示渲染函数返回的内容。它返回模态数组吗？

要显示具有当前 id 的模式，请在循环内首次创建组件时传入 id:

this.toggle(id, modalType)

并将函数签名更改为

toggle = (id, modalType) = () => {
  this.setState({
  currentId: id,
  [modalType]: !this.state[modalType],
}

这将创建一个新的闭包函数，将 id 和 modalType 存储在每个按钮内，单击时将触发正确的 setState。然后，您可以使用存储在模式内状态中的 currentId。