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

问题：当我单击按钮

addnew

时，它会显示

ModalUser

，然后当我再次单击它时，它不会显示。如果我刷新页面，它将再次开始工作

这就是我想要的：我想让

addnew

按钮反复显示

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" />
   )    
}

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>
        </>
    )
}

import React，{useState}来自“React”
从“/ModalUser”导入ModalUser；
函数Main（）{
const[show，setShow]=useState（false）；
常量handleShow=（）=>setShow（true）；
返回(
新增
)    
}

ModalUser.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" />
   )    
}

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>
        </>
    )
}

import React，{useState，useffect}来自“React”
从“react bootstrap”导入{Modal，Button}；
功能调节器（道具）{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
useffect（（）=>{
布景（道具表演）；
}，[props.show]）；
返回(
{props.header}
{props.message}
接近
保存更改
)
}

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

setShow（false）}header=“info”/
const handleClose=（）=>props.close（）；

您可以

show

状态将由父组件拥有。父级将

show

和

toggleShow

功能传递给子级，以访问和更改父级中的

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" />
   )    
}

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>

函数Main（）{
const[show，setShow]=useState（false）；
const-toggleShow=（）=>setShow（p=>！p）；
返回(
新增
)    
}

和模态组件中的ModalUser.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" />
   )    
}

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>

const{show，toggleShow}=props
{props.header}
{props.message}
接近
保存更改

我个人建议提取上述状态，并为开放状态提供一个真相来源

//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>
        </>
    )
}

//index.js
从“React”导入React，{useState}
从“/ModalUser”导入ModalUser；
函数Main（）{
const[show，setShow]=useState（false）；
常量handleShow=（）=>setShow（true）；
返回(
新增
)    
}
//ModelUser.js
从“React”导入React，{useState，useEffect}
从“react bootstrap”导入{Modal，Button}；
功能调节器（道具）{
const handleClose=（）=>props.setShow（false）；
返回(
{props.header}
{props.message}
接近
保存更改
)
}

试试，然后回复我

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>
        </>
    )
}

import React，{useState，useffect}来自“React”
从“react bootstrap”导入{Modal，Button}；
功能调节器（道具）{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
useffect（（）=>{
设置显示（！props.show）；
}，[props.show]）；
返回(
{props.header}
{props.message}
接近
保存更改
)
}

最可能的不一致行为是由于您的双重状态、删除本地模态状态和仅传递道具状态，在这种情况下，您不需要模态内部状态，传递show和setShow到模态，

props.setShow（false）}>{…}