React中父组件如何获取子组件的值或方法

 更新时间:2022年08月11日 11:57:25   作者:qing_小诺  
这篇文章主要介绍了React中父组件如何获取子组件的值或方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

父组件获取子组件的值或方法

先来说下从哪获取的启发,想要从父组件获取子组件的值或方法。。。

一次写代码的时候,用 Antd 中的 Modal 包裹了一个子组件,子组件中包含 input 输入框,想要在点击对话框上面确定按钮时(即Modal 自带的 onOk方法),拿到其中输入的值

下面用一个父组件(Father.js)和子组件(Hearder.js)来演示如何能拿到值和方法:

方法一

给子组件添加属性 ref='footer'

<Header ref='footer'></Header>

 然后在父组件用 this.refs.footer.xxx 的方式拿值

alert(this.refs.footer.state.sonmsg);//拿到子组件中state中的值
this.refs.footer.run();//拿到子组件中runn方法

方法二

给子组件添加 onRef={(ref) => { this.child = ref; }}

<Header onRef={(ref) => { this.child = ref; }}></Header>

然后在子组件中添加生命周期的 componentDidMount 这个方法:

componentDidMount() {
     if (this.props.onRef) {
        this.props.onRef(this);
     }
}

然后在父组件用 this.child.xxx 的方式拿值

alert(this.child.state.sonmsg);
this.child.run();

方法三

在父组件创建ref容器:this.pw = React.createRef()

constructor(props) {
    super(props);
    // 方法3:创建用来保存ref标识的标签对象的容器
    this.pw = React.createRef()
}

然后给子组件添加属性:ref={this.pw}

<Header ref={this.pw}></Header>

然后就可以在父组件用 this.pw.current 拿到子组件值和方法:

alert(this.pw.current.state.sonmsg); 
this.pw.current.run()

React函数式组件传值之子传父

在用react进行函数式编程时,父组件可以通过props向子组件传值,那么子组件怎么向父组件传值呢?

首先,父组件需要向子组件传递一个函数,然后,子组件通过props获取函数并附上参数,最后,父组件通过函数拿到子组件传递的值。

具体案例

父组件:home.tsx

import React, { useState } from 'react';
import Child from './component/child';
import './index.less';
 
const Home: React.FC = () => {
  const [parentCount, setParentCountt] = useState<number>(0);
 
  const getChildCount = (val: number) => {
    setParentCountt(val);
  };
 
  return (
    <div className="home-wrap">
      <p>我是父组件</p>
      <p>子组件传过来的数字:{parentCount}</p>
      <Child getCount={getChildCount} />
    </div>
  );
};
 
export default Home;

子组件:child.tsx

import React, { useState } from 'react';
 
type selfProps = {
  getCount: Function;
};
 
const Child: React.FC<selfProps> = (props) => {
  const { getCount } = props;
  const [count, setCount] = useState<number>(0);
 
  const addCount = (val: number) => {
    setCount(val);
    getCount(val);
  };
 
  return (
    <div className="child-wrap">
      <p>子组件</p>
      <p>数字:{count}</p>
      <button onClick={() => addCount(count + 1)}>数字递增</button>
    </div>
  );
};
 
export default Child;

效果展示

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React结合Drag API实现拖拽示例详解

    React结合Drag API实现拖拽示例详解

    这篇文章主要为大家介绍了React结合Drag API实现拖拽示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 详解如何在react中搭建d3力导向图

    详解如何在react中搭建d3力导向图

    本篇文章主要介绍了如何在react中搭建d3力导向图,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • React使用TailwindCSS的实现示例

    React使用TailwindCSS的实现示例

    TailwindCSS是一个实用优先的CSS框架,本文主要介绍了React使用TailwindCSS的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • React Redux管理库示例详解

    React Redux管理库示例详解

    这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
    2022-12-12
  • React使用emotion写css代码

    React使用emotion写css代码

    这篇文章主要介绍了React如何使用emotion写css代码,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • React Hooks 实现和由来以及解决的问题详解

    React Hooks 实现和由来以及解决的问题详解

    这篇文章主要介绍了React Hooks 实现和由来以及解决的问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • React 远程动态组件实践示例详解

    React 远程动态组件实践示例详解

    这篇文章主要为大家介绍了React 远程动态组件实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • react native图片解析流程详解

    react native图片解析流程详解

    这篇文章主要为大家介绍了react native图片解析流程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • react显示文件上传进度的示例

    react显示文件上传进度的示例

    这篇文章主要介绍了react显示文件上传进度的示例,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下
    2021-04-04
  • react中fetch之cors跨域请求的实现方法

    react中fetch之cors跨域请求的实现方法

    本篇文章主要介绍了react中fetch之cors跨域请求的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论