如何将值传递给模态答案

【问题标题】：How to pass a value to a modal如何将值传递给模态
【发布时间】：2021-10-19 06:27:40
【问题描述】：

例如，我有一个返回给我一些 id 的函数，我会删除这些帖子，并返回 id 为：onClick={() => { Delete(idvalue[i]) }}强>

但是，我需要在删除项目之前打开一个模式，询问该人是否确定要删除，当他们单击“是”时，我不知道如何传递要删除的正确值以及将其保留在哪里 onClick打开模式。

function Idchecker() {
    for (let i = 0; i < idvalue.length; i++) {
        if (idvalue[i] == item.id) {
            return (
                <div className="img-array">
                    <button className="click-img" onClick={() => { Delete(idvalue[i]) }}>
                        <img src={trash} alt="botão excluir" className="imgsbtns" />
                    </button>

                    <button className="click-img">
                        <img src={edit} alt="botão editar" className="imgsbtns" />
                    </button>
                </div>
            )
        }
    }
}

模态：

return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            style={{ fontFamily: "Questrial" }}
        >
            <Modal.Header>
                <Modal.Title id="contained-modal-title-vcenter">
                    DELETE THE POST
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <p>
                    are you sure?
                </p>
                <Button onClick={Delete}>YES</Button>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>CLOSE</Button>
            </Modal.Footer>
        </Modal>
    );
}

【问题讨论】：

标签： javascript html arrays reactjs bootstrap-modal

【解决方案1】：

添加两个状态：

openDeleteModal 管理打开模式（例如参数，你有这个参数）
deleteId 存储 id。

const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [deleteId, setDeleteId] = useState(null);

点击post时必须打开modal并更新deleteId，所以重写onClick函数：

onClick={()=>{
    setDeleteId(idvalue[i]);
    setOpenDeleteModal(true)}
    }

通过 props 将 deleteId 和 setOpenModal 传递给 Modal 组件并重写模态按钮功能：

<Modal.Body>
                <p>
                    are you sure?
                </p>
                <Button 
                    onClick={()=>{
                    Delete(deleteId)
                    setOpenDeleteModal(false) //close modal after delete
                    }}>
                    YES
                 </Button>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={()=>setOpenDeleteModal(false)}>CLOSE</Button>
            </Modal.Footer>

【讨论】：