ReactJS中如何将正确ID传递至删除确认模态框？

问题核心原因 #

所有行的删除模态框都使用了相同的DOM ID myModal。Bootstrap模态框通过ID定位目标弹窗，当页面存在多个相同ID的元素时，浏览器只会匹配第一个出现的元素，因此无论点击哪一行的删除按钮，都会触发第一行对应的模态框，显示首条数据的ID。

修复方案 #

给每一行的模态框生成唯一ID，利用传入的参数ID拼接，确保每个模态框ID不重复。

修改DeleteParameter.jsx #

import React from "react";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";

export const DeleteParameter = (props) => {
  // 基于当前行的参数ID生成唯一模态框ID
  const modalId = `modal-${props.row}`;

  return (
    <div className="openbtn text-center">
      <button
        type="button"
        className="btn btn-danger"
        data-bs-toggle="modal"
        data-bs-target={`#${modalId}`}
      >
        Delete
      </button>

      {/* 使用动态生成的唯一ID */}
      <div className="modal" tabindex="-1" id={modalId}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Remove?</h5>
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              <p>
                Do you want to remove this record permanently? {props.row}
              </p>
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                No
              </button>
              <button
                type="button"
                className="btn btn-primary"
                onClick={() => props.deleteParam(props.row)}
                data-bs-dismiss="modal"
              >
                Yes
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

可选优化：用React状态控制模态框 #

如果想更贴合React状态管理逻辑，避免依赖Bootstrap的DOM属性触发模态框，可以通过组件内部状态控制显示/隐藏：

import React, { useState } from "react";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";

export const DeleteParameter = (props) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div className="openbtn text-center">
      <button
        type="button"
        className="btn btn-danger"
        onClick={() => setShowModal(true)}
      >
        Delete
      </button>

      {/* 通过React状态控制模态框显示，无需依赖ID */}
      <div className={`modal ${showModal ? 'show d-block' : ''}`} tabindex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Remove?</h5>
              <button
                type="button"
                className="btn-close"
                onClick={() => setShowModal(false)}
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              <p>
                Do you want to remove this record permanently? {props.row}
              </p>
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-secondary"
                onClick={() => setShowModal(false)}
              >
                No
              </button>
              <button
                type="button"
                className="btn btn-primary"
                onClick={() => {
                  props.deleteParam(props.row);
                  setShowModal(false);
                }}
              >
                Yes
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Joseph Kyle Diel Mahasol