点击React和boostrap打开模态，并显示行信息

Question

我只想用bootstrap打开一个模态并做出反应。我想把行infos放在模态中，模态在html中，但当我点击一行时，它只触发列表中的第一个模态。我试着把特定的ID放在模态上，但它不起作用。。。有人能帮我吗？

const ProductsList = ({ products }) => {
return (
<div className="col-10 offset-2 p-0">
<nav className="navbar navbar-light bg-light">
<ul className="navbar-nav ml-auto">
<li style={{ zIndex: "1" }} className="nav-item active">
<Link style={{ cursor: "pointer" }} href="/products/add-product">
<a className="nav-link">
<i className="fas fa-plus-square"></i> Ajouter un produit
</a>
</Link>
</li>
</ul>
</nav>
<div className="table-responsive-lg">
<div className="row text-white bg-dark px-4">
<div className="col-3">ID</div>
<div className="col-2">Nom du produit</div>
<div className="col-2">Prix/unité</div>
<div className="col-2">Stock</div>
<div className="col-3">Catégorie</div>
</div>
{products &&
products.products.map((product) => {
return (
<div
key={product._id}
className="row border px-4"
data-toggle="modal"
data-target="#exampleModal"
>
<div className="col-3 border-right">{product._id}</div>
<div className="col-2 border-right">
{product.productName.charAt(0).toUpperCase() +
product.productName.slice(1)}
</div>
<div className="col-2 border-right">{product.price} €</div>
<div className="col-2 border-right">{product.stock}</div>
<div className="col-3">{product.categorie.categoryName}</div>
<div
className="modal fade"
id="exampleModal"
tabIndex="-1"
aria-hidden="true"
role="dialog"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">
{product.productName}
</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">...</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>
</div>
);
};
export default ProductsList;

我以前试过桌子，但结果是一样的。

Answer 1

如前所述，id属性是一个常量(exampleModal(，不会因行而异。请注意，行(单击目标(上的data-target属性也必须更改。

此外，由于Bootstrap模式需要JavaScript在React之外切换可见性，您可能会得到奇怪的结果：

React不知道在React之外对DOM所做的更改。它根据自己的内部表示来确定更新，如果相同的DOM节点被另一个库操纵，React就会感到困惑，无法恢复。源

考虑使用React引导库(如reactstrap(来管理React中的切换。