Question

我正在遍历组件中的数据，并将数据作为道具发送到另一个组件。

但是，引导程序模式可以正常工作，没有错误。

这是我的代码：

render() { const { datas, amt, dis_price, type_dis_price, tot_amt, no_of_items } = this.state; return (
<div>
    <button className="btn btn-outline-secondary" onClick={this.restoreAllItems} style={{ marginLeft: "50%" }}>List All Items</button>

    <hr />
    <div className="row">
        <div className="col-md-7 _fixedr">

            {datas.map(data => (
            <CartItem key={data.id} data={data} /> ))}

        </div>
    </div>
</div>
) }

这是循环组件：

render() { const { id, name, price, qty, img_url, type } = this.props.data; return (
<div className="row tot-box">

    <div className="card m_box">
        <img src={trash} alt='thrh' width="20px" height="20px" data-toggle="modal" data-target="#exampleModal" onClick={this.deleteItem} className="float-right cross" id="myModal" />

        <div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div className="modal-dialog" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div className="modal-body">
                     sdfsdfsdsddsfsd
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" className="btn btn-primary">Save changes</button>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>
) }

Answer 1

对不起，但我不明白您想要什么。您能具体一点吗，谢谢。

bootstrap 4 modal在反应循环组件时不可见

1 个答案: