React中父组件执行子组件的函数 使用class + onRef写法

最新推荐文章于 2022-11-30 14:56:16 发布
最新推荐文章于 2022-11-30 14:56:16 发布
阅读量462 收藏 1
点赞数
分类专栏： React
原文链接：https://fizzz.blog.csdn.net/article/details/107323193
版权

React中父组件执行子组件的函数 使用class + onRef写法

 

在React中,父组件执行子组件的函数的写法如下

父组件中

添加函数

onRef = (ref) => {
  this.child = ref
}

在使用子组件时

<ChildComponet onRef={this.onRef} />

onRef是固定的用法,

在子组件里

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

父组件执行子组件的函数

submitFun = () => {
  this.child.onReset();
}
wwf1225
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 中父组件与子组件双向绑定问题
10-16
主要介绍了react 中父组件与子组件双向绑定问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
onRef在react中的使用
weixin_44471622的博客
03-30 4814
组件间通信除了props外还有onRef方法，不过React官方文档建议不要过度依赖ref。本文使用onRef语境为在表单录入时提取公共组件，在提交时分别获取表单信息。 下面demo中点击父组件按钮可以获取子组件全部信息，包括状态和方法，可以看下demo中控制台打印。 // 父组件 class Parent extends React.Component { testRef=(ref)=&gt...
vue-cli 3.10.0 父组件给子组件传值
JJ44409915的专栏
08-28 562
App.vue (父组件) <template> <!-- （:v）子组件将要接受的变量名 （value）data中的value --> <sub-component-a :v="value"></sub-component-a> </template> <script> // 引用子组件 import Sub...
react 父子组件通信（class组件、hooks组件）
luckydog
01-07 1478
当在子组件中调用onRef函数时，正在调用从父组件传递的函数。this.props.onRef（this）这里的参数指向子组件本身，父组件接收该引用作为第一个参数：onRef = {ref =>（this.child = ref）} 然后它使用this.child保存引用。之后，可以在父组件内访问整个子组件实例，并且可以调用子组件函数。组件间通信除了props外还有onRef方法，不过React官方文档建议不要过度依赖ref。
React: onRef 和 ref
大空翼 つばさ
12-19 1466
onRef 实现父组件调用子组件方法 class Child extends Component{ constructor(props){ super(props) this.state = { //声明变量 text: '山有木兮木有枝' } if(props.onRef){ //如果接收到onRef方法 则调用该方法传入子组件this指针 props.onRef(this) } } func =(arg)=>
React开发（139）:react中onref
歌谣的博客
09-10 179
react 父组件与子组件之间的值传递的方法
08-29
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React通过父组件传递类名给子组件的实现方法
10-19
React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React通过父组件传递类名给子组件的方法,需要的朋友可以参考下
React 子组件向父组件传值的方法
08-29
本篇文章主要介绍了React 子组件向父组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 中ref 的使用（类组件和函数组件）以及forwardRef 与 useImperativeHandle 详解
二三的博客
11-30 5860
在一个父组件中，我们想要获取到其中的节点元素或者子组件实例，从而直接调用其上面的方法。Class 类组件和函数组件是两种不同的写法。父组件使用useRef创建一个 ref 对象，将这个 ref 对象赋给子组件的 ref 属性。子组件使用forwardRef包裹自己，允许作为函数组件的自己使用 ref。然后使用钩子函数，在该钩子函数的第二个函数参数中返回一些状态或方法，这个被返回的状态或方法就可以被父组件访问到。父组件使用创建的 ref 对象的current属性获取子组件暴露出的状态或方法。
react 父类通过onRef调用子类方法
zb0002011的博客
04-17 810
import React, {Component} from 'react'; export default class Parent extends Component { render() { return( <div> <Child onRef={this.onRef} /> // ...
React进阶教程之Refs详解——通俗易懂，Class组件&Function组件（受控组件与非受控组件）
乐闻世界
11-11 1155
React进阶教程之Refs详解——通俗易懂，Class组件&Function组件（受控组件与非受控组件），现在有一个表单，页面加载完成时第一个input框自动获取焦点，不需要人为选中，应该怎么实现？React提供了Refs帮助开发者可以直接操作DOM节点，就像jquery时代一样，直接操作DOM，简单明了。
React的ref是怎样调用其他元素？
Learn-anything.cn
11-18 221
一、State Hook是啥？ State Hook 就是指 useState 这个特殊函数，让你不用编写class，就可以使用state特性，换言之就是让 函数组件 拥有 state 特性，对数据进行动态更新。 二、class中的state 动态改变数据，譬如一个计数器组件，class组件中实现方式如下： class Example extends React.Component { constructor(props) { super(props);
React中父组件执行子组件的函数 使用class + onRef写法
知无涯
07-13 3612
在React中,父组件执行子组件的函数的写法如下 父组件中 添加函数 onRef = (ref) => { this.child = ref } 在使用子组件时 <ChildComponet onRef={this.onRef} /> onRef是固定的用法, 在子组件里 componentDidMount(){ this.props.onRef(this) } 父组件执行子组件的函数 submitFun = () => { this.child.onReset()
​react类组件定义ref的三种方式、以及函数式组件定义ref的方式；父组件获取子组件的自定义方法
LJ_759482的博客
04-02 7879
类组件ref的字符串方式 class App extends React.Component{ componentDidMount(){ console.log("componentDidMount...",this) this.refs.textInput.focus() } render(){ console.log("render...") ...
react父组件调用子组件方法
热门推荐
xiaohesong
02-26 7万+
前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解. 其实今天说的这个 父组件直接调用子组件方法, 也类似. 先看代码,比较直观. import React, {Component} from 'react'; export default class Parent extends Component { render() { return( ...
react中类组件与函数式组件ref使用
Curry的博客
07-14 2152
在某些场景中，我们可能需要通过ref来实现某些功能，比如父组件调用子组件的方法。 父组件为类组件 import React, { createRef } from 'react'; import ClassChild from './ClassChild.jsx'; import FunChild from './FunChild.jsx'; export default class DemoLayout extends React.Component { constructor()
React父组件调用子组件中的函数
小马总的博客
09-03 4417
第一步在父组件中写下面代码 onRef = (ref) => { this.child = ref }; 第二步将此方法传个子组件 <SelectModal onRef={this.onRef} /> 第三步在子组件中实现以下代码 componentDidMount() { thi...
【React】 类组件中 Ref 的使用（createRef）
qq_45677671的博客
04-22 1313
文章目录基本使用父子传值 基本使用 React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例,ref可以挂载到组件上也可以是dom元素上。 挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例 挂载到dom元素上时表示具体的dom元素节点 import React, { PureComponent } from 'react' class Child extends Pure
在React项目中，组件的写法
最新发布
05-31
在React中，组件分为两种：函数式组件和类组件。下面分别介绍它们的写法。 1. 函数式组件 函数式组件是一个纯函数，接收props作为参数并返回JSX元素。它没有自己的状态，也没有生命周期方法。函数式组件的写法如下： ```jsx function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>{props.description}</p> </div> ); } ``` 2. 类组件 类组件是一个ES6类，继承React.Component类，并重写它的render方法来返回JSX元素。类组件有自己的状态和生命周期方法。类组件的写法如下： ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } componentDidMount() { // 在组件挂载后执行的代码 } componentDidUpdate(prevProps, prevState) { // 在组件更新后执行的代码 } componentWillUnmount() { // 在组件卸载前执行的代码 } render() { return ( <div> <h1>Hello, {this.props.name}!</h1> <p>{this.props.description}</p> <p>Count: {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } ``` 以上就是React中组件的写法，您可以根据需求选择合适的方式来编写组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值