React父組件調用子組件中的方法實例詳解

3403771864 發布于2022-09-14 22:01 / 2708人閱讀

　　本文主要講述ref 的應用僅為父組件調用子組件場景下的應用方式1

　　Class組件

　　1. 自定義事件

　　 Parent.js

　　import React, { Component } from 'react';
　　import Child from './Child';
　　class Parent extends Component {
　　componentDidMount () {
　　console.log(this.childRef)
　　}
　　handleChildEvent = (ref) => {
　　// 將子組件的實例存到 this.childRef 中, 這樣整個父組件就能拿到
　　this.childRef = ref
　　}
　　//按鈕事件處理
　　handleClick = () => {
　　// 通過子組件的實例調用組組件中的方法
　　this.childRef.sendMessage()
　　}
　　render () {
　　return (
　　<>
　　<Child
　　onChildEvent={this.handleChildEvent}
　　/>
　　<button onClick={this.handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　}
　　export default Parent;

　　Child.js

　　import React, { Component } from 'react';
　　class Child extends Component {
　　//子組件完成掛載時, 將子組件的方法 this 作為參數傳到父組件的函數中
　　componentDidMount () {
　　// 在子組件中調用父組件的方法,并把當前的實例傳進去
　　this.props.onChildEvent(this)
　　}
　　// 子組件的方法, 在父組件中觸發
　　sendMessage = () => {
　　console.log('sending message')
　　}
　　render () {
　　return ( <div>Child</div> );
　　}
　　}
　　export default Child;
　　2. 使用 React.createRef()

　　ParentCmp.js

　　import React, { Component } from 'react';
　　import ChildCmp from './ChildCmp';
　　export default class ParentCmp extends Component {
　　constructor(props) {
　　super(props)
　　// 創建Ref
　　this.childRef = React.createRef()
　　}
　　// 按鈕事件
　　handleClick = () => {
　　// 直接通過 this.childRef.current 拿到子組件實例
　　this.childRef.current.sendMessage()
　　}
　　render () {
　　return (
　　<>
　　<ChildCmp ref={this.childRef} />
　　<button onClick={this.handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　}

　　而子組件就是一個普通的組件

　　ChildCmp.js

　　import React, { Component } from 'react';
　　export default class ChildCmp extends Component {
　　sendMessage = () => {
　　console.log('sending message')
　　}
　　render () {
　　return 'Child';
　　}
　　}

　　3. 使用回調Refs

　　回調 Refs 是另一種設置 Ref 的方式，可以控制 refs 被設置和解除的時間。

　　此時，需要傳遞一個函數，不同于傳遞 createRef() 創建的 ref 屬性。

　　 current也不是訪問 Ref 必需。

　　ParentCmp.js

　　import React, { Component } from 'react';
　　import ChildCmp from './ChildCmp';
　　export default class ParentCmp extends Component {
　　constructor(props) {
　　super(props)
　　// 創建 Ref，不通過 React.createRef()
　　this.childRef = null
　　}
　　// 設置 Ref
　　setChildRef = (ref) => {
　　this.childRef = ref
　　}
　　// 按鈕事件
　　handleClick = () => {
　　// 直接通過 this.childRef 拿到子組件實例
　　this.childRef.sendMessage(`Trigger Child Event from Parent`)
　　}
　　render () {
　　return (
　　<>
　　<ChildCmp ref={this.setChildRef} />
　　<button onClick={this.handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　}

　　而子組件還是一個普通的組件

　　ChildCmp.js

　　import { Component } from 'react';
　　export default class ChildCmp extends Component {
　　sendMessage = (message) => {
　　console.log('sending message:', message)
　　}
　　render () {
　　return 'Child';
　　}
　　}

　　【注】對比自定義事件方式，回調 Refs 更像是精簡的自定義事件方式：

　　在自定義事件名稱變成了 ref之后，子組件內無需手動綁定。

　　Function組件

　　在普通默認情況下，無法在函數組件上使用 ref 屬性，主要是沒有實例。上述兩種方式都行不通。

　　解決辦法就是使用 forwardRef 和 useImperativeHandle。

　　不過在函數的內部是可以使用 useRef 鉤子來獲取組件內的 DOM 元素。

　　Parent.js

　　import React, { useRef } from 'react';
　　import Child from './Child';
　　const Parent = () => {
　　// 通過 Hooks 創建 Ref
　　const childRef = useRef(null)
　　const handleClick = () => {
　　childRef.current.sendMessage()
　　}
　　return (
　　<>
　　<Child
　　ref={childRef}
　　/>
　　<button onClick={handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　export default Parent;

　　Child.js

　　import React, { forwardRef, useImperativeHandle } from 'react';
　　const Child = forwardRef((props, ref) => {
　　//將子組件的方法 暴露給父組件
　　useImperativeHandle(ref, () => ({
　　sendMessage
　　}))
　　const sendMessage = () => {
　　console.log('sending message')
　　}
　　return ( <div>Child</div> );
　　})
　　export default Child;

　　注：

　　上面的例子中只是簡單地演示了父子組件之間的方法調用，當然實際情況中子組件中可以也會有自己的 ref 指向自己內部的 DOM 元素，不過這些原理都是一樣的。

　　補充：子組件調用父組件方法

　　子組件中調用父組件的setId方法

　　父組件

　　<NavBarX
　　item={item}
　　current={current}
　　getBatchDetails={(id) => this.getBatchDetails(0, id)}
　　setId={(id, callback) => this.setState({ id }, callback)}
　　onRef={this.onNavBarXRef}
　　/>

　　子組件

　　this.props.setId(prePageId, () => {
　　getBatchDetails(prePageId)
　　})

上述就是全部內容，后續請大家多多關注！

云服務器 GPU云服務器子組件調用組件組件實例 php調用組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127716.html

5、React組件事件詳解

摘要：組件事件響應在構建虛擬的同時，還構建了自己的事件系統且所有事件對象和規范保持一致。的事件系統和瀏覽器事件系統相比，主要增加了兩個特性事件代理和事件自動綁定。 React組件事件響應 React在構建虛擬DOM的同時，還構建了自己的事件系統；且所有事件對象和W3C規范保持一致。 React的事件系統和瀏覽器事件系統相比，主要增加了兩個特性：事件代理、和事件自動綁定。 1、事件代理 ...

Ververica 2019-08-22 15:13 評論0 收藏0
簡述 React 組件生命周期

摘要：這個階段只有一個方法，該方法在整個生命周期內調用且僅調用一次。在這里進行一些相關的銷毀操作，比如撤銷定時器，事件監聽等等。詳解 React 生命周期整個 React 生命周期有3個階段：創建、更新、卸載，每個階段有對應的工作和方法，我們可以看下面這個經典的圖研究一下： showImg(https://segmentfault.com/img/remote/1460000016330...

qpal 2019-08-23 11:52 評論0 收藏0
React入門看這篇就夠了

摘要：背景介紹入門實例教程起源于的內部項目，因為該公司對市場上所有框架，都不滿意，就決定自己寫一套，用來架設的網站。做出來以后，發現這套東西很好用，就在年月開源了。也就是說，通過鉤子函 react - JSX React 背景介紹 React 入門實例教程 React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套...

luckyw 2019-08-22 13:55 評論0 收藏0
React的Refs方法獲取DOM實例和訪問子組件方法及屬性

摘要：綁定屬性調用的時候使用調用子組件方法這是一個很神奇的方法，它可以調用子組件的方法以及屬性。建立組件建立子組件，并在子組件實現一個方法，如，這個方法實現變更當前組件上面的文本，提供這樣一個測試用例。輸入框獲取焦點完整實例點我輸入框獲取焦點 React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。 ref : 綁定屬性 refs : 調用的時候...

geekzhou 2019-08-21 14:16 評論0 收藏0
React

摘要：基礎創建虛擬參數元素名稱，例如參數屬性集合，例如，，，從參數開始，表示該元素的子元素，通常這些元素通過創建，文本文件可以直接插入嘻嘻哈哈這是渲染器，將元素渲染到頁面中。 React簡介 FeceBook開源的一套框架，專注于MVC的視圖V模塊。實質是對V視圖的一種實現。 React框架的設計沒有過分依賴于某個環境，它自建一套環境，就是virtual DOM（虛擬DOM）。提供基礎AP...

hlcc 2019-08-22 10:35 評論0 收藏0