启用onHide功能时，React Bootstrap模式无法打开

如何解决启用onHide功能时，React Bootstrap模式无法打开

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

出了什么问题？

家长JS --------

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

MODAL -------

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;

解决方法

之所以会这样，是因为渲染模态时会立即调用props.setShowModal(false)。您可以通过将代码更改为onHide={() => props.setShowModal(false)}来解决此问题。

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

hideModal() {
    props.setShowModal(false)
}

并将其传递给onHide。