React学习笔记10- Ref的应用

用法

1.给标签设置ref="username"

通过这个获取this.refs.username , ref可以获取到应用的真实dom

2. 给组件设置ref="username"

通过这个获取this.refs.username ,ref可以获取到组件对象

 

写法

import React, { Component } from 'react'

export default class App extends Component {
    myRef = React.createRef()
    a = 1
    render() {
        return (
            <div>
                <input ref={this.myRef} type="text" />
                <button onClick={
                    () => {
                        console.log(this.myRef.current.value)
                        console.log('click', this.a)
                    }
                }>add</button>
            </div>
        )
    }

    /* 
          <input ref="mytext" type="text" />
          这种直接用
          this.refs.mytext即可访问
          ref可以直接=一个字符串，但严格模式下会有警告，不推荐这样写
          推荐使用
           myRef = React.createRef()
            <input ref={this.myRef} type="text" />
           通过this.myRef.current来访问
    */

}