时间戳

首页 > 解决方案 > 引导模式没有得到反应状态

reactjs - 引导模式没有得到反应状态

问题描述

我有一个Comp组件，它所做的只是显示六次，一个打开模式的按钮。下面是代码。

import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React from "../../node_modules/react";

function Comp(props) {
  return [0, 1, 2, 3, 4, 5].map(value => 
    <>
      <button type="button" class="btn btn-success m-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
        {`Click button ${value} to open below Modal`}
        {/* The value in the above line is working perfectly fine */}
      </button>

      <div class="modal fade text-white" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content bg-dark">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Show value</h5>
              <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="mb-3">
                  <h1 className="text-white">{value}</h1>
                  {/* The above value is always zero */}
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>);
}

export default Comp;

0, 1, 2, 3, 4, 5对于数组中的每个值，value被映射到每个按钮，结果如下。

所有按钮都以其相应的值显示

到现在为止，所有按钮都与它们对应value的 s 一起正确显示，如图所示。但是当我打开模式时，只显示一个值，0这与我单击哪个按钮无关。

在下图中，我单击了带有valueas的按钮3并0显示在模式中。

模态显示 0

标签： reactjstwitter-bootstrapbootstrap-5

解决方案

这是因为您每次都打开相同的模式。Buttondata-bs-target和 modalid必须是对应且唯一的，所以 0 的按钮打开 0 的 modal， 1 的按钮打开 1 的 modal 以此类推... ↓↓↓</p>

这是可选的，但您还需要将所有class属性更改为并为每次迭代中呈现的包装元素提供className唯一属性key<div key={"some_key_" + index}>

import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React from "../../node_modules/react";

function Comp(props) {
  return [0, 1, 2, 3, 4, 5].map((value, index) => 
    <div key={"some_key_" + index}>
      <button
        type="button"
        className="btn btn-success m-2"
        data-bs-toggle="modal"
        data-bs-target={"#exampleModal" + index}
      >{`Click button ${value} to open below Modal`}</button>

      <div
        className="modal fade text-white"
        id={"exampleModal" + index}
        data-bs-backdrop="static"
        tabIndex="-1"
        aria-labelledby={"exampleModalLabel" + index}
        aria-hidden="true"
      >
        <div className="modal-dialog">
          <div className="modal-content bg-dark">
            <div className="modal-header">
              <h5 className="modal-title" id={"exampleModalLabel" + index}>
                Show value
              </h5>
              <button
                type="button"
                className="btn-close btn-close-white btn-sm"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              <form>
                <div className="mb-3">
                  <h1 className="text-white">{value}</h1>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  ));
}

export default Comp;

在我的工作演示HERE中，我不得不...-bs-...从 HTML 属性中删除所有属性，因为我没有使用任何这些，但你有这个想法

推荐阅读