如何在父组件中显示和隐藏子组件中的模态？

Question

问题： 当我点击按钮 Add new 时它显示 ModalUser 然后当我再次点击它时它不会显示。如果我刷新页面，它会再次开始工作。

这就是我想要的： 我想让 Add New 按钮一遍又一遍地显示 ModalUser，而不仅仅是一次。我该怎么做？

index.js

import React,{useState} from 'react'
import ModalUser from "./ModalUser";
function Main(){
   const [show, setShow] = useState(false);
   const handleShow = () => setShow(true);
   return (
      <Button variant="primary" onClick={handleShow}>Add new</Button>
      <ModalUser message="hei you" show={show} header="info" />
   )    
}

ModalUser.js

import React, {useState,useEffect} from 'react'
import { Modal, Button } from "react-bootstrap";
function ModalUser(props){
   const [show, setShow] = useState(false);    
   const handleClose = () => setShow(false);
   useEffect(() => {
        setShow(props.show);
   },[props.show]);

return (
        <>            
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                <Modal.Title>{props.header}</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Close
                </Button>
                <Button variant="primary" onClick={handleClose}>
                    Save Changes
                </Button>
                </Modal.Footer>
            </Modal>
        </>
    )
}

Answer 1

将关闭回调传递给 Modal 组件并移除 Modal 中的本地显示状态

<ModalUser message="hei you" show={show} close={() => setShow(false)} header="info" />

const handleClose = () => props.close();

Answer 2

你可以lift the state up.

show 状态将由父组件拥有。 Parent 会将 show 和 toggleShow 函数传递给 child 以访问和更改 parent 中的 show 状态。

父组件，index.js:

function Main(){
   const [show, setShow] = useState(false);
   const toggleShow = () => setShow(p => !p);
   return (
      <Button variant="primary" onClick={toggleShow}>Add new</Button>
      <ModalUser message="hei you" show={show} toggleShow={toggleShow} header="info" />
   )    
}

并且在模态组件中，ModalUser.js:

const {show, toggleShow} = props

<Modal show={show} onHide={toggleShow}>
  <Modal.Header closeButton>
  <Modal.Title>{props.header}</Modal.Title>
  </Modal.Header>
  <Modal.Body>{props.message}</Modal.Body>
  <Modal.Footer>
  <Button variant="secondary" onClick={toggleShow}>
      Close
  </Button>
  <Button variant="primary" onClick={toggleShow}>
      Save Changes
  </Button>
  </Modal.Footer>
</Modal>

Answer 3

就我个人而言，我建议提取上面的状态并为打开状态提供 1 个真实来源。

//index.js

import React,{useState} from 'react'
import ModalUser from "./ModalUser";

function Main(){
   const [show, setShow] = useState(false);
   const handleShow = () => setShow(true);
   return (
      <Button variant="primary" onClick={handleShow}>Add new</Button>
      <ModalUser message="hei you" show={show} header="info" setShow={setShow} />
   )    
}
//ModelUser.js
import React, {useState,useEffect} from 'react'
import { Modal, Button } from "react-bootstrap";

function ModalUser(props){
   const handleClose = () => props.setShow(false);
return (
        <>            
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                <Modal.Title>{props.header}</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Close
                </Button>
                <Button variant="primary" onClick={handleClose}>
                    Save Changes
                </Button>
                </Modal.Footer>
            </Modal>
        </>
    )
}

Answer 4

试试看然后回复我

import React, {useState,useEffect} from 'react'
import { Modal, Button } from "react-bootstrap";
function ModalUser(props){
   const [show, setShow] = useState(false);    
   const handleClose = () => setShow(false);
   useEffect(() => {
        setShow(!props.show);
   },[props.show]);

return (
        <>            
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                <Modal.Title>{props.header}</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Close
                </Button>
                <Button variant="primary" onClick={handleClose}>
                    Save Changes
                </Button>
                </Modal.Footer>
            </Modal>
        </>
    )
}

Answer 5

不一致的行为很可能是由于你的双重状态，删除本地模态状态，只传递道具状态，在这种情况下你不需要你的模态内部状态，将 show 和 setShow 传递给模态，<Modal show={props.show} onHide={() => props.setShow(false)}>{...}</Modal>

如何在父组件中显示和隐藏子组件中的模态？

How to show and hide a Modal in child component from Parent component?

reactjs

react-hooks

use-state