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操作DOM之forwardRef问题

    React操作DOM之forwardRef问题

    这篇文章主要介绍了React操作DOM之forwardRef问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • webpack4+react多页面架构的实现

    webpack4+react多页面架构的实现

    webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多。这篇文章主要介绍了webpack4+react多页面架构的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 简析React Native startReactApplication 方法

    简析React Native startReactApplication 方法

    这篇文章主要介绍了React Native startReactApplication 方法简析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • 解决React报错Expected `onClick` listener to be a function

    解决React报错Expected `onClick` listener to be a function

    这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React组件实例三大属性state props refs使用详解

    React组件实例三大属性state props refs使用详解

    这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React 18 如何更新 state 中的对象

    React 18 如何更新 state 中的对象

    state 中可以保存任意类型的JavaScript值,包括对象,但是,不应该直接修改存放在 React state 中的对象,这篇文章主要介绍了React 18更新state中的对象,需要的朋友可以参考下
    2023-08-08
  • 详解React中传入组件的props改变时更新组件的几种实现方法

    详解React中传入组件的props改变时更新组件的几种实现方法

    这篇文章主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 一文教你如何避免React中常见的8个错误

    一文教你如何避免React中常见的8个错误

    这篇文章主要来和大家一起分享在 React 开发中常见的一些错误,以及如何避免这些错误,理解这些问题背后的细节,防止犯下类似的错误,需要的可以参考下
    2023-12-12
  • 详解React 和 Redux的关系

    详解React 和 Redux的关系

    这篇文章主要为大家介绍了React 和 Redux的关系,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • create-react-app安装出错问题解决方法

    create-react-app安装出错问题解决方法

    这篇文章主要介绍了create-react-app安装出错问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论