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

目录
  • 父组件获取子组件的值或方法
    • 方法一
    • 方法二
    • 方法三
  • 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;

效果展示

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • react 父组件与子组件之间的值传递的方法

    概念上,组件是封闭的环境.React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事.以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据. 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数).但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用. 父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但

  • React通过父组件传递类名给子组件的实现方法

    React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度

  • react 中父组件与子组件双向绑定问题

    在项目中我们可能会遇到类似这样的场景,也就是父子组件的双向数据绑定 首先,先把在head中引入react.js.react-dom.js和可选择的babel.js(这里需要注意引用的顺序,react.js必须在react-dom.js之前) <head> <script src="react.js"></script> <script src="react-dom.js"></script> <scr

  • React前端渲染优化--父组件导致子组件重复渲染的问题

    React前端渲染优化--父组件导致子组件重复渲染的问题

    目录 React前端渲染优化--父组件导致子组件重复渲染 说明 一般的优化方式 项目中常见会导致重复渲染的写法以及改进方法 组件重复渲染问题(pureComponent, React.memo, useMemo, useCallback) render执行会带来两个方面的影响 下面将具体说明这几个都使用场景和解决的问题 React前端渲染优化--父组件导致子组件重复渲染 说明 目前我们所使用 react 版本一般会有以下四种方式触发渲染 render,而其中通过父组件 render 会直接通知子

  • React父组件调用子组件中的方法实例详解

    目录 Class组件 1. 自定义事件 2. 使用 React.createRef() 3. 使用回调Refs Function组件 补充:子组件调用父组件方法 总结 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式! Class组件 1. 自定义事件  Parent.js import React, { Component } from 'react'; import Child from './Child'; class Parent exte

  • 详解React 父组件和子组件的数据传输

    在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则. React的组件间通讯是单向的.数据必须是由父级传到子级或者子级传递给父级层层传递. 如果要给兄弟级的组件传递数据,那么就要先传递给公共的父级而后在传递给你要传递到的组件位置. 这种非父子关系的组件间传递数据,不推荐使用这种层层传递的方式:而是选择使用维护全局状态功能模块(Redux) 一.父组件向子组件传递数据 父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性:而子组件中通过 thi

  • React 子组件向父组件传值的方法

    本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re

  • React Hook父组件如何获取子组件的数据/函数

    目录 React Hook父组件获取子组件数据/函数 子组件MyWorldMap 父组件MyTrip React Hook父组件提交子组件form 父组件 子组件 React Hook父组件获取子组件数据/函数 我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用. 文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少,要不就是父子组件傻傻分不清,于是只好再啃了一下文档,就学了一下其它hoo

  • React中的生命周期和子组件

    目录 组件生命周期 创建创建期 获取虚拟DOM 子组件 组件生命周期 为了说明组件的创建,存在,销毁的过程,react提供了组件的生命周期,共分三大周期: 创建期:说明组件的创建的过程,相当于人的少年 存在期:说明组件的存在的过程,相当于人的中年 销毁期:说明组件的销毁的过程,相当于人的老年 创建创建期 创建期共分五个阶段: ES5开发中,对应五个方法:getDefaultProps,getInitialsate, ​​componentWillMount​​, ​​render​​, ​​co

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

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

    目录 父组件获取子组件的值或方法 方法一 方法二 方法三 React函数式组件传值之子传父 具体案例 效果展示 父组件获取子组件的值或方法 先来说下从哪获取的启发,想要从父组件获取子组件的值或方法... 一次写代码的时候,用 Antd 中的 Modal 包裹了一个子组件,子组件中包含 input 输入框,想要在点击对话框上面确定按钮时(即Modal 自带的 onOk方法),拿到其中输入的值 下面用一个父组件(Father.js)和子组件(Hearder.js)来演示如何能拿到值和方法: 方法一

  • Vue父组件如何获取子组件中的变量

    在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示 注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以

  • ymPrompt的doHandler方法来实现获取子窗口返回值的方法

    郁闷的很,心里仍不死心,有重头到尾的那介绍的方法看了一遍,看到doHandler时有两个参数sign和autoClose,看了方法介绍后,觉得这个方法可行(以前一直都是用ymPrompt.close方法来直接关闭子窗口 ),就写了一段脚本测试下,可以实现我想要的 ,现将代码贴出如下: 父窗口代码: 复制代码 代码如下: function viewSubFeeDetail(feeId) { ymPrompt.win({message:'viewSubFeeDetail.action?feeId='

  • vue ref如何获取子组件属性值

    目录 ref获取子组件属性值 父引入.注册组件并调用组件 调用子组件的函数 调用子组件的属性 子组件更改属性 父组件 子组件 ref获取子组件属性值 父引入.注册组件并调用组件 引入.注册 <script>   ....   import CustomerModal from './modules/CustomerModal'   export default {     name: "CustomerList",     mixins:[JeecgListMixin],

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • vue实现父组件获取子组件的方法或属性值详解

    目录 父组件获取子组件方法或属性值 这里主要使用了vue的$ref 父组件获取子组件中的变量 案例一:点击父组件的按钮,操作子组件显示 案列二:获取子组件data中的变量 父组件获取子组件方法或属性值 vue的本质就是每一块只负责自己这一块的工作,这样更容易维护. 这里主要使用了vue的$ref 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作. 当使用在子组件上,可以用来获取子组件的属性. 那么下面我们要实现的就是如何在父组件上使用子组件的方法 目标:我需要实现一个在父组件

随机推荐