国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React的Refs方法獲取DOM實例 和 訪問子組件方法及屬性

geekzhou / 4411人閱讀

摘要:綁定屬性調用的時候使用調用子組件方法這是一個很神奇的方法,它可以調用子組件的方法以及屬性。建立組件建立子組件,并在子組件實現一個方法,如,這個方法實現變更當前組件上面的文本,提供這樣一個測試用例。輸入框獲取焦點完整實例點我輸入框獲取焦點

React 支持一種非常特殊的屬性 Ref ,你可以用來綁定到 render() 輸出的任何組件上。

ref : 綁定屬性

refs : 調用的時候使用

調用子組件方法

這是一個很神奇的方法refs,它可以調用子組件的方法以及屬性。下面用一個例子來實現調用子組件方法。

建立組件

建立子組件MyComponent.js,并在子組件實現一個方法,如:subHandleClick,這個方法實現變更當前組件上面的文本,提供這樣一個測試用例。

使用子組件

通過import SubComponent from "./SubComponent"來引用子組件SubComponent,在 render方法中注冊使用組件

render(){
  return(
    
  )
}
綁定ref屬性

在子組件調用上面綁定一個值為subcomponents的屬性ref,subcomponents

調用子組件方法

在入口父組件App.js中,添加方法handleClick,去調用子組件SubComponent.js中的subHandleClick方法

handleClick(){
  //this.refs.subcomponents可以訪問子組件的方法
  //也可以獲取子組件的state...
  this.refs.subcomponents.subHandleClick();
}
完整實例

入口父組件App.js

import React, { Component } from "react";
import SubComponent from "./SubComponent"
class MyComponent extends Component {
  handleClick(){
    this.refs.subcomponents.subHandleClick();
  }
  render(){
    return(
      
) } } ReactDOM.render( , document.querySelector("#app") );

子組件SubComponent.js

import React, { Component } from "react";
export default class SubComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "這里是初始化文本"
    };
  }
  subHandleClick(){
    this.setState({text: "文本被改變啦!哈哈!"})
  }
  render(){
    return(
      
查看:{this.state.text}
) } }
訪問父組件方法

父組件Parent.js

class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
     value:""
    }
  }
  refresh(){
    // 這里箭頭函數很重要
    return ()=>{
        this.setState({value:"這里是子組件調用的方法"})
    }
  }
  render(){
    return (
      

兄弟組件溝通

{this.state.value}

) } } ReactDOM.render(, document.getElementById("app"));

子組件SubComponent.js

import React, { Component } from "react";
export default class SubComponent extends Component {
  constructor(props) {
    super(props);
  }
  subHandleClick(){
    this.setState({text: "文本被改變啦!哈哈!"})
  }
  render(){
    return(
      
) } }
獲取DOM實例

通過ref屬性,你可獲取,實例中的屬性方法,甚至可以通過他獲取到DOM實例節點this.refs.myInput.getDOMNode()

ref 屬性綁定
refs 獲取DOM實例

獲取支撐實例( backing instance )。這樣就可以確保在任何時間總是拿到正確的實例。

// 輸入框獲取焦點
this.refs.myInput.focus()
完整實例
import React, { Component } from "react";
class MyComponent extends Component {
  handleClick(){
    this.refs.myInput.focus();
  }
  render(){
    return(
      
) } } ReactDOM.render( , document.querySelector("#app") );

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

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

相關文章

  • 如何在 React 組件中正確使用 Refs指南

    摘要:通常在組件的構造函數內創建,使其在整個組件中可用。例如純文本查看復制代碼如上所示一個實例在構造函數中創建,并賦值給在方法內部,將構造函數中創建的傳遞給接下來,讓我們看一個在組件中使用的示例。回調回調是在中使用的另一種方式。 使用 React 時,我們的默認思維方式應該是 不會強制修改 DOM ,而是通過傳入 props 重新渲染組件。但是,有些情況卻無法避免修改 DOM 。React ...

    Backache 評論0 收藏0
  • react 生命周期

    摘要:一個組件的生命周期分為三個部分實例化存在期和銷毀時。如果回調函數以函數的方式來指定,那么在組件更新的時候回調會被調用次。 一個React組件的生命周期分為三個部分:實例化、存在期和銷毀時。 實例化階段 客戶端渲染時,如下依次被調用 getDefaultProps() getInitialState() componentWillMount() render() component...

    Fundebug 評論0 收藏0
  • React

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

    hlcc 評論0 收藏0
  • 02.react進階指南

    摘要:指定讀取當前的。它為其后代元素觸發額外的檢查和警告。嚴格模式檢查僅在開發模式下運行它們不會影響生產構建。作用識別不安全的生命周期關于使用過時字符串的警告關于使用廢棄的方法的警告檢測意外的副作用檢測過時的為高階組件。 react 進階 懶加載 React.lazy函數能讓你像渲染常規組件一樣處理動態引入(的組件)。Suspense加載指示器為組件做優雅降級。fallback屬性接受任何在...

    zzbo 評論0 收藏0

發表評論

0條評論

geekzhou

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<