Javascript Have Button onClick函数父组件触发时，子组件中的模态组件将出现

当我单击父组件中的onClick函数时，子组件中的状态值需要更改

父组件：

<Button  onClick={handleFormat}>Next</Button>

function UploadLegal() {

  handleFormat(){
   setShow(true)
  }

  const [show, setShow] = useState(false)
   return(
  <Modal className="uploadModal" show={show}>
  ......design.......
  </Modal>
)}

下一步

子组件：

<Button  onClick={handleFormat}>Next</Button>

function UploadLegal() {

  handleFormat(){
   setShow(true)
  }

  const [show, setShow] = useState(false)
   return(
  <Modal className="uploadModal" show={show}>
  ......design.......
  </Modal>
)}

函数UploadLegal（）{
handleFormat（）{
设置显示（真）
}
const[show，setShow]=useState（false）
返回(
……设计。。。。。。。
)}

您可以将值和函数作为道具从父对象传递给子对象，但不能从子对象传递给父对象。因此，您希望将其升级到父组件

function Parent() {

  const [show, setShow] = useState(false);

  const handleFormat = () => {
    setShow(true);
  }

  return (
    <>
      <Button onClick={handleFormat}>Next</Button>
      <UploadLegal show={show} setShow={setShow}/>
    </>
  )
}

函数父函数（）{
const[show，setShow]=useState（false）；
常量handleFormat=（）=>{
设置显示（正确）；
}
返回(
下一个
)
}

孩子从道具中获取状态，而不是自己存储状态

function UploadLegal({show, setShow}) {
   return(
    <Modal className="uploadModal" show={show}>
    ......design.......
    </Modal>
  )
}

函数UploadLegal（{show，setShow}）{
返回(
……设计。。。。。。。
)
}