reactでのref使用の分析

記事ディレクトリ

- refとは

refとは

コンポーネントは実際のDOMノードではありません。React開発では、公式はネイティブDOMを直接操作することを推奨していません。コンポーネントのDOMノードは、仮想DOMと呼ばれるメモリ内に存在するデータ構造です。コンポーネントから実際のDOMノードを取得する必要がある場合は、ref属性を正式に提供する必要があります。Reactは、renderメソッドまたはReactコンポーネントインスタンスで作成されたDOM要素にアクセスするための参照を提供します。
refには3つのタイプがありますが、ここでは最初に2つを学習します。

文字列型

次の小さな例を見てください。ボタンをクリックすると、入力ボックスの値を次のpタグに割り当てることができます。

import React, {
    
     Component } from 'react'

export class App extends Component {
    
    
    render() {
    
    
        return (
            <div>
                <input type='text' ref="haha" />
                <button onClick={
    
    this.getText}>点击</button>
                <p ref="user">user</p>
            </div>
        )
    }
    getText = () => {
    
    
        console.log(this.refs.haha.value)
        const user = this.refs.haha.value
        this.refs.user.innerHTML = user
    }
}

export default App

ここでは、refを使用して操作用のdomノードを取得し、入力データを入力した後にthis.refsを出力します。
入力ボックスのデータはthis.refs.haha.valueであることがわかりますが
ここに画像の説明を挿入
、この文字列タイプのメソッドは削除されています。。次を参照してください

createRef create

まず、ページの上部にインポートし、ここにPureComponentをインポートします。これは、次の例で使用するためです。

import React, {
    
     createRef, PureComponent } from 'react'

1つ書く：

1. this.headerRefs = createRef（）をコンストラクターで直接定義します。2
。次に、使用する必要のあるコンポーネントにrefをバインドします。

3.ボタンのクリック時間で、現在の属性を使用してDOMノードまたはコンポーネントをインスタンスとして取得します。これはここに出力されます

export class App extends PureComponent {
    
    
    constructor() {
    
    
        super()
        this.headerRefs = createRef()
    }
    render() {
    
    
        return (
            <div>App Page
                <Header ref={
    
    this.headerRefs}/>
                <button onClick={
    
    this.getText}>点击获取</button>
            </div>
        )
    }
    getText = () => {
    
    
        // 通过current属性去获取DOM节点或者组件是实例
        console.log(this.headerRefs.current.state.name)
  
    }
}

class Header extends PureComponent {
    
    
    state = {
    
    name: 'hello react'}
    render() {
    
    
        return (<div>header Component</div>)
    }
}

export default App

関数は実装されていますが、コンストラクターで実装するのは少し面倒です。別の記述方法は次のとおりです。

2つ書く：

入力コンテンツをpタグに表示します
1.headerRefs= createRef（）の形式を使用してrefを直接作成します
2.使用するコンポーネントをバインドします<Header ref = {this.headerRefs} />
3.this.userRefs.currentを使用します.innerHTML=this.inputRefs.current.valueは要件を完了します

export class App extends PureComponent {
    
    

    headerRefs = createRef()
    inputRefs = createRef()
    userRefs = createRef()
    render() {
    
    
        return (
            <div>App Page
                <Header ref={
    
    this.headerRefs}/>
                <input type='text' ref={
    
    this.inputRefs} />
                <p ref={
    
    this.userRefs}>user</p>
                <button onClick={
    
    this.getText}>点击获取</button>
            </div>
        )
    }
    getText = () => {
    
    
        console.log(this.headerRefs.current.state.name)
        console.log(this.inputRefs)
        console.log(this.userRefs)
        this.userRefs.current.innerHTML = this.inputRefs.current.value
    }
}

class Header extends PureComponent {
    
    
    state = {
    
    name: 'hello react'}
    render() {
    
    
        return (<div>header Component</div>)
    }
}

export default App

効果を確認します。
ここに画像の説明を挿入