React - 通过refs/React.createRef()获取DOM元素

1.通过回调Refs获取dom
需要在想被获取的元素上设置属性ref

• ref 可以是回调函数

import React from 'react';

export default class RefApp extends React.Component{
    constructor(props){
        super(props);
        this.copy= this.copy.bind(this);
        this.input = null;
    }
    //对文本内容进行复制
    copy(){
        this.input.select();
        document.execCommand("copy");
    }

    render(){
        return (
            <div>
            	{/* 一、ref可以是回调函数,此时参数e即为该dom元素本身，将它绑定到对象属性input中 */}
                <input ref={e=>this.input=e} type="text" ></input>
                <button onClick={this.copy} >点击复制内容</button>
            </div>
        )
    }
}

• ref 为字符串，可以通过this.refs.ref值来获取元素

    copy(){
    	console.log(this.refs);
        this.refs.inputEle.select();
        document.execCommand("copy");
    }
    render(){
        return (
            <div>
            	{/* 二、ref为字符串，通过组件对象下的refs属性获取 */}
                <input ref="inputEle" type="text" ></input>
                <button onClick={this.copy} >点击复制内容</button>
            </div>
        )
    }

2.React.createRef()
该方法返回一个ref 对象， 通过ref 属性绑定该对象，该对象下的current 属性就指向了绑定的元素或组件对象

import React from 'react';

export default class RefApp extends React.Component{
    constructor(props){
        super(props);
        this.input = React.createRef();
        this.copy= this.copy.bind(this);
    }
    //对文本内容进行复制
    copy(){
        console.log(this.input)
        this.input.current.select();
        document.execCommand("copy");
    }

    render(){
        return (
            <div>
                <input ref={this.input} type="text" ></input>
                <button onClick={this.copy} >点击复制内容</button>
            </div>
           
        )
    }
}