如何向react-confirm-alert传递props（记录ID）？

要实现将点击按钮对应的记录ID传递给确认弹窗，只需对现有代码做两处关键修改：

1. 让deleteConfirm接收记录ID参数 #

修改deleteConfirm函数，使其可以接收recordId参数，这样就能在弹窗中动态显示对应ID的提示信息，以及在确认删除时使用该ID：

const deleteConfirm = ({ onClose, recordId }) => {
    // 动态生成提示消息
    const msg = `Are you sure you want to delete the record with id = ${recordId}?`

    const handleClickedCancel = () => {
        onClose();
    };
    const handleClickedOK = () => {
        // 这里使用传入的recordId执行删除逻辑
        console.log(`Deleting record with id: ${recordId}`);
        // 替换为你的实际删除API调用或状态更新逻辑
        onClose();
    };
    return (
        <div className='react-confirm-alert'>
            <h3>DELETE A RECORD</h3>
            <div>{msg}</div>
            <div>
                <button onClick={handleClickedOK}>OK</button>
                <button onClick={handleClickedCancel}>CANCEL</button>
            </div>
        </div>
    );
}

2. 在触发弹窗时传递recordId #

在onDeleteClicked函数中，调用confirmAlert时，通过customUI的回调函数把获取到的recordId传递给deleteConfirm：

const onDeleteClicked = (e) => {
    const recordId = e.target.id;
    confirmAlert({ 
        customUI: ({ onClose }) => deleteConfirm({ onClose, recordId }) 
    });
};

修改后的完整代码 #

import React from 'react';
import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/src/react-confirm-alert.css'


export default function DeleteWithConfirmComponent() {

    const deleteConfirm = ({ onClose, recordId }) => {
        const msg = `Are you sure you want to delete the record with id = ${recordId}?`

        const handleClickedCancel = () => {
            onClose();
        };
        const handleClickedOK = () => {
            // 执行删除逻辑，使用传入的recordId
            console.log(`Deleting record ${recordId}`);
            onClose();
        };
        return (
            <div className='react-confirm-alert'>
                <h3>DELETE A RECORD</h3>
                <div>{msg}</div>
                <div>
                    <button onClick={handleClickedOK}>OK</button>
                    <button onClick={handleClickedCancel}>CANCEL</button>
                </div>
            </div>
        );
    }      

    const onDeleteClicked = (e) => {
        const recordId = e.target.id;
        confirmAlert({ 
            customUI: ({ onClose }) => deleteConfirm({ onClose, recordId }) 
        });
    };

    return <button id="123" onClick={onDeleteClicked}>Delete Record</button>;
}

核心逻辑是：通过在customUI中创建一个闭包函数，把当前点击的recordId传递给deleteConfirm，这样弹窗就能拿到对应的ID来动态生成内容和执行删除操作。

内容的提问来源于stack exchange，提问作者AlanSwansea