Question

我是新来的回应者，所以这个问题，

我正在表单验证过程中呈现一个react-bootstrap Modal。

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

const CustomModal = (props) =>{
    return (
        <div>
            <Modal show={true} animation={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={...}}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
};
export default CustomModal;

如何在Button上实现onClick以关闭此模式

Answer 1

您可以按照以下说明修改代码。

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

const CustomModal = (props) =>{
    const [isModalOpen, setModal] = useState(true); // You can pass default state (true/false) from props as parameter into useState. i.e. useState(props.isModalOpen)
    return (
        <div>
            <Modal show={isModalOpen} animation={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={() => setModal(false)} >
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
};
export default CustomModal;

Answer 2

将onHide={ () => setModal(false)}添加到<Modal... >以使用closeButton 并将Button添加setModal(false)到onClick。

const CustomModal = (props) =>{
    const [isModalOpen, setModal] = useState(true); // You can pass default state (true/false) from props as parameter into useState. i.e. useState(props.isModalOpen)

    return (
      <div >
            <Modal  show={isModalOpen} onHide={ () => setModal(false)} animation={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                     <Button variant="secondary" onClick={() => setModal(false)} >
                        Close1
                    </Button> 
                </Modal.Footer>
            </Modal>
        </div>
    )
};

要提高代码效率，您可以提取() => setModal(false)并放入函数。像handleClose() { setModal(false); }

const CustomModal = (props) =>{
    const [isModalOpen, setModal] = useState(true); // You can pass default state (true/false) from props as parameter into useState. i.e. useState(props.isModalOpen)
    const handleClose=({isOpen})=> { setModal(isOpen);//Do somthings els for example remove temporary variables
      }
    return (
      <div >
            <Modal  show={isModalOpen} onHide={ () => handleClose(false)} animation={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                     <Button variant="secondary" onClick={() => handleClose(false)} >
                        Close1
                    </Button> 
                </Modal.Footer>
            </Modal>
        </div>
    )
};

Answer 3

当前，您有一个show = {true}的硬编码值。而是使用值为True的变量。然后，通过onClick使用函数，可以将变量设置为false，以关闭模式。

例如show={isOpen}

使用React Bootstrap渲染模态

3 个答案: