时间戳

首页 > 解决方案 > 模态在子组件中，按钮在父组件中如何在reactjs中关闭模态

javascript - 模态在子组件中，按钮在父组件中如何在reactjs中关闭模态

问题描述

我已经尝试了一些方法，它可以解决我的解决方案这些是示例：这是父组件：

const[openup,setOpenup]=useState(false)

const setSchedule =() => setOpenup(true)

<Button onClick={setSchedule} >Openup</Button>
   <Child open={openup} />

这是智利组件：

export default function CreateSchedule(props) {

 const [show, setShow] = useState(props.open);

 const handleClose =() => setShow(false)
return(
  <div>
     <Modal className='dummy' show={show} onHide={handleClose}>
      Its not working  working !!! 
     </Modal>
  </div>
  ) 
}

任何人都可以摆脱这个，...

标签： javascriptreactjsredux

解决方案

假设 Child 是 CreateSchedule 组件，您可以重新设计代码结构，以便父级通过传递诸如 open 之类的道具以及关闭模态的函数来控制模态的呈现

你的父组件看起来像

const[openup,setOpenup]=useState(false)

const setSchedule =() => setOpenup(true)

const handleClose = () => setOpenup(false);
<Button onClick={setSchedule} >Openup</Button>

<Child open={openup} handleClose={handleClose}/>

您的子组件将是

export default function CreateSchedule(props) {
    return(
      <div>
         <Modal className='dummy' show={props.open} onHide={props.handleClose}>
          Its not working  working !!! 
         </Modal>
      </div>
      ) 

}

推荐阅读