码迷,mamicode.com
首页 > 其他好文 > 详细

react 父子组件传值

时间:2021-02-03 10:29:31      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:div   ops   rgb   nts   def   span   cli   属性   pre   

//父组件

const LayoutMain = ()=>{
  const  [flowImg,setFlowImg] = useState(false);
  const openModal = ()=>{
    setFlowImg(true)
    console.log(flowImg);
  }
  const handleOk = ()=>{
    setFlowImg(false)
  }
  const handleCancel = ()=>{
    setFlowImg(false)
  }
  return(<div>
    <button onClick={openModal}>打开modal</button>
    <FlowImg handleOk={handleOk} handleCancel={handleCancel} isModalVisible={flowImg}/>  //属性传值/传事件
  </div>)
}
export default LayoutMain;


//子组件
const FlowImg =(props)=>{
  const { isModalVisible, handleOk,handleCancel} = props;//子组件 用props 接收值和事件
  return(<div>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
  </div>)
}

 

react 父子组件传值

标签:div   ops   rgb   nts   def   span   cli   属性   pre   

原文地址:https://www.cnblogs.com/zhaozhenzhen/p/14360506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!