启用 onHide 功能时反应 bootstrap 模态不打开

Question

我注意到当我输入以下条件时，我的 React Bootstrap 模态不会打开： onHide={props.setShowModal(false)}。当我将其更改为 onHide={props.setShowModal(true)} 时，它始终保持打开状态。

出了什么问题？

父 JS --------

    const [showModal, setShowModal] = useState(false);
    <AddModal showModal={showModal} setShowModal={setShowModal} />

模态------

import React, { useState, useEffect } from 'react';
import { Button, Form, FormControl, Modal } from "react-bootstrap";

const AddModal = (props) => {

    const handleClose = () => {
        props.setShowModal(false);
    }
    return (
        <Modal show={props.showModal} animation={false}
            // onHide={props.setShowModal(false)}
        >
            <Modal.Header closeButton>
                <Modal.Title>Enter Item</Modal.Title>
            </Modal.Header>
            {
        
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}
                    >
                        Cancel
                  </Button>
                    <Button variant="primary" onClick={handleClose}
                    >
                        Save Changes
                  </Button>
                </Modal.Footer>}
        </Modal>
    );
}

export default AddModal;

Answer 1

发生这种情况是因为 props.setShowModal(false) 在呈现模态时被立即调用。您可以通过将代码更改为 onHide={() => props.setShowModal(false)}.

来修复它

这是一个常见的陷阱。 onHide（以及 onClick 和任何其他事件处理程序）需要一个函数，该函数将在触发事件时调用。 props.setShowModal 是一个函数，props.setShowModal(false)是不是。所以你的选择要么按照我的建议传递一个 lamda 函数，要么创建一个函数

hideModal() {
    props.setShowModal(false)
}

并将其传递给 onHide。

启用 onHide 功能时反应 bootstrap 模态不打开

React bootstrap modal not opening when onHide function is enabled

reactjs

react-bootstrap

react-modal