react如何在父组件中调用子组件事件

父组件是如何使用子组件的事件的，下边数值累加的例子

类组件

将子组件的this传到父组件，给父组件添加一个属性，值为this，之后就可以通过父组件的属性调用子组件的事件了

import React,{Component} from 'react';// 这是子组件
class A extends Component{componentDidMount() {this.props.fn(this)}state = {count:1}render() {let { count } = this.state;return (<div>子组件的值： {count}</div>)}
}// 这是父组件class B extends Component{// 这个事件是为了拿到子组件的thisfn_getThis = (_this) => {this.$child=_this}// 已经拥有子组件this，可以随意调用子组件事件了increment = () => {this.$child.setState(state => {return {count:state.count+1}})   }render() {return (<div><A fn={this.fn_getThis} /><button onClick={()=>{this.increment()}}>父组件的按钮</button></div>)}
}
export default B;

函数组件

useRef,useImperativeHandle ,forwardRef 3个api的配合使用

useImperativeHandle：可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。语法：  useImperativeHandle(ref, createHandle, [deps])
forwardRef：一个函数，返回一个拥有第二个参数的组件

import React,{useRef,useImperativeHandle ,forwardRef,useState} from 'react';// 这是子组件
const A = (props,ref) => {let [count, setCount] = useState(0)useImperativeHandle(ref, () => {return {imcrement:() => {setCount(value => {return value + 1})}        }})return (<div>{count}</div>)
}const NewA = forwardRef(A)// 这是子组件
const B = () => {let refA = useRef();const fn_sonImcrement = () => {refA.current.imcrement()}return(<div><NewA ref={refA} /><button onClick={()=>{fn_sonImcrement()}}>按钮</button></div>)
}export default B;

react如何在父组件中调用子组件事件相关推荐

vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
vue父组件中调用子组件中的方法及vue父组件调用孙子组件的方法
一:通过ref直接调用子组件的方法: 子组件child.vue: <template><div>我是子组件</div> </template> < ...
vue 父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中<template><div><Button @click=&qu ...
vue父组件中调用子组件的方法
(1)通过ref直接调用子组件的方法 //父组件中<template><div><Button @click="handleClick">点击调 ...
vue 父刷新子_vue.js从父级中更新子组件数据
如何从父组件中更新子组件中的数据?我正在尝试从父级中更新autores属性,并让它更新子级数据.目前什么都没有发生,我认为我没有正确的数据链接.如果我将它作为数据添加到父组件中,那么当代码运行时,父组 ...
从父组件中获取子组件的值
父组件中获取子组件中的值(三种的方式) 1. this.$root.子组件中的值 2. this.$parent.子值 $parent是一级一级访问的,如果子组件多的话需要多个$parent3. &l ...
vue父组件如何调用子组件里面的方法
在vue里,父组件要调用子组件里边定义的方法,可以通过ref属性来获取到子组件的方法并执行,下面直接贴上子组件和父组件的代码吧! 父组件代码: <template><div clas ...
vue中父组件怎么调用子组件
前言前段时间,写了个地址的控件,封装成了一个子组件,在其他页面共用. 原文地址:vue利用级联选择器实现全国省市区乡村五级菜单联动然后当时出现了个bug,也没有太注意,后来才发现的.就是重置不了地 ...
父组件如何调用子组件中的方法？
父组件代码,假如父组件要关闭弹窗时候,需要做一系列操作,例如关闭弹窗时需要将子组件中的内容恢复成原来的样子,那么该如何调用呢? 1.首先应该在子组件上面加一个ref,例如:ref="chil ...

react如何在父组件中调用子组件事件

类组件

函数组件

react如何在父组件中调用子组件事件相关推荐

最新文章

热门文章