React 中父子组件的传值

明确思想

(1)首先得明确一个问题,作为子组件一般我们不会再给他绑定model,因为我们遵守React的一个思想,就是一个Container,其余都是用作展示组件的component。而所谓的展示组件,就是他只接受数据和函数,而不进行相关的处理。那么我们会遇到以下问题

问题

① 父组件如何给子组件传值和函数

②子组件如何返回数据给父组件

③如果我需要通过父组件来控制子组件的某些功能,怎么才能使用子组件的函数

涉及内容

①父组件传值和函数给子组件

②父组件控制子组件函数

举例说明

在做一个list页面展示,我的一个新增数据的功能,这个地方使用的Modal弹框处理,而Modal是作为一个单独组件,我就会思考,本页面用于显示Modal和上传数据使用,而Modal则用于自身的表单的校验,那么我怎么在点击组件确定时,返回给父组件数据,并且隐藏Modal呢。下面是我正在做的一个项目截图,我要在Modal里面输入身份证号,然后经过查询,将名字反馈到姓名,然后点击确定跳转页面。

父传子代码如下

这个是我要传给子组件的一些函数和数据,我写在了state

 parentprops :{
                title:'新增其他人员',
                isVisible:false,
                list:{},
                name:'',
                handleCancel:()=>
                {
                    this.props.dispatch({
                        type:'otherpeople/changeVisibal',
                        payload:{isVisible:false},

                    })
                },
                onRef :(ref) => {
                    this.ModalForm = ref
                },
                seachIdCard:(idCard)=>
                {
                    this.props.dispatch({
                        type:'otherpeople/getBase',
                        payload:{
                            idCard,
                        },
                    });
                    
                },

 

这个是向子组件传递数据和函数

 

 <ModalForm parentprops={this.state.parentprops} />

在子组件中通过

this.props.parentprops.handleCancel();

来使用父组件的函数,数据也类似。

父传子代码如下

在父组件我们要给子组件传递一个函数,用ref来绑定子组件

onRef :(ref) => {
                    this.ModalForm = ref
                },

然后在子组建的componentDidMount里面绑定this

 componentDidMount(){
      
      this.props.parentprops.onRef(this)
    }

然后就在父组件里调用子组件的函数

用法如下:

this.ModalForm.check()

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值