我无法通过使用onClick prop调用函数来显示Modal

Question

import React, { useState } from 'react'
import Header from './Header'
import { Button } from '@material-ui/core';
import {Modal} from 'react-bootstrap';
import Dialog1 from './Dialog1';

const Assessment = () => {

    const[div2visibility, setdiv2visibility] = useState("invisible");
   

    const showDialog1 = () => {
        return(
            <Modal>
                <Modal.Header>Here will be the image and close button</Modal.Header>
                <Modal.Body>Here will be the message</Modal.Body>
                <Modal.Footer>Here will be the button for re-assessment</Modal.Footer>
            </Modal>
        )
    }

    return (
        <div>
            <Header/>
            <div className="d-flex flex-row">
                <div className="d-flex flex-column align-items-start m-3 mx-5">
                    <div className='m-2 mx-5 visible' style={{borderRadius: "15px", padding: "10px", paddingRight:"25px", backgroundColor:"#00CCFF"}}>
                        <h5 className='font-weight-bold'>Are you having any of these following:-</h5>
                        <div className='d-flex flex-row'>
                            <ul>
                                <li>Extremely difficult to breath</li>
                                <li>Severe Chest pain.</li>
                                <li>Having a tough time awakening</li>
                                <li>Losing consciousness</li>
                            </ul>
                            <Button onClick={() => {showDialog1(); console.log("onclick worked!")}}
                             className="mx-5 my-4 align-content-around" 
                             variant="contained" 
                            style={{maxWidth: "30px", maxHeight: "30px"}}>
                                Yes
                            </Button>

                            <Button onClick={e => {e.preventDefault(); setdiv2visibility("visible");}}
                            className="mx-1 my-4 align-content-around" 
                            color="white" variant="contained" 
                            style={{maxWidth: "30px", maxHeight: "30px"}}>
                                No
                            </Button>

                        </div>
                    </div>
               </div>
            </div>
         </div>
        )
}
export default Assessment

有没有人能给我建议更好的方法来调用模式在这种情况下也有人能告诉我为什么它不能工作，我正处于学习react和react钩子的初学者阶段。

此外，添加整个代码的唯一原因是为了详细了解我在这个项目中试图做的事情。

Answer 1

这是因为您没有在Assessment组件中的任何地方呈现模态组件showDialog。根据您的代码，您需要添加以下行，以便在单击按钮时有条件地呈现模式

{ div2visibility==='visible' && <showDialog1/> }

这将在单击按钮时呈现模式，但这并不是完美的解决方案。您应该通过自己的本地状态来处理modal的关闭和打开，并将父状态作为道具进行传递。React-Bootstrap modal组件接受show和handleClose作为道具，您可以使用它们来控制您的模式的打开状态。

import React, { useState } from 'react'
import Header from './Header'
import { Button } from '@material-ui/core';
import {Modal} from 'react-bootstrap';
import Dialog1 from './Dialog1';

const Assessment = () => {

    const[open,setOpen] = useState(false); //initially modal is closed
   

    const showDialog1 = ({open,setOpen}) => {
        return(
            <Modal show={open} handleClose={()=>{setOpen(false)}>
                <Modal.Header>Here will be the image and close button</Modal.Header>
                <Modal.Body>Here will be the message</Modal.Body>
                <Modal.Footer>Here will be the button for re-assessment</Modal.Footer>
            </Modal>
        )
    }

    return (
        <div>
         {open && <showDialog1 open={open} setOpen={setOpen} /> }
            <Header/>
            <div className="d-flex flex-row">
                <div className="d-flex flex-column align-items-start m-3 mx-5">
                    <div className='m-2 mx-5 visible' style={{borderRadius: "15px", padding: "10px", paddingRight:"25px", backgroundColor:"#00CCFF"}}>
                        <h5 className='font-weight-bold'>Are you having any of these following:-</h5>
                        <div className='d-flex flex-row'>
                            <ul>
                                <li>Extremely difficult to breath</li>
                                <li>Severe Chest pain.</li>
                                <li>Having a tough time awakening</li>
                                <li>Losing consciousness</li>
                            </ul>
                            <Button onClick={() => {showDialog1(); console.log("onclick worked!")}}
                             className="mx-5 my-4 align-content-around" 
                             variant="contained" 
                            style={{maxWidth: "30px", maxHeight: "30px"}}>
                                Yes
                            </Button>

                            <Button onClick={e => {e.preventDefault(); setOpen(true);}}
                            className="mx-1 my-4 align-content-around" 
                            color="white" variant="contained" 
                            style={{maxWidth: "30px", maxHeight: "30px"}}>
                                No
                            </Button>

                        </div>
                    </div>
               </div>
            </div>
         </div>
        )
}
export default Assessment

这在文档上解释得很好。https://react-bootstrap.netlify.app/components/modal/#modals