一. 字符串形式调用(简单，但是效率低，在未来的版本中可能会废弃，不推荐使用)

 //创建类式组件
        class Demo extends React.Component{
            render(){
                return (
                    <div>
                        <input type='text' placeholder="点击按钮提示" id="aa"/>&nbsp;
                        <button onClick={this.showData}>显示提示效果</button>&nbsp;
                        <input ref='aa1' type='text' onBlur={this.showData1} placeholder="失去按钮提示" id="aa1"/>
                    </div>
                    /* 组件内的标签可以定义ref来标识自己，会在组件的实例对象的this.refs属性中找到 */
                )
            }
            showData = ()=>{
                let v = document.querySelector("#aa").value;
                alert(v);
            }
            showData1 = ()=>{
                let v = document.querySelector("#aa1").value;
                console.log(this);
                let v1 = this.refs.aa1.value;
                console.log(v,"--",v1);
                /*不建议使用它，因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。
                   一句话总结： 效率不高
                */
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo/>, document.querySelector("#test"));

二. 回调函数调用(简单好用，使用频率高)

//创建类式组件
        class Demo extends React.Component{
            render(){
                return (
                    <div>
                        <input ref={(currentNode)=>{this.input1=currentNode}} type='text' placeholder="点击按钮提示" id="aa"/>&nbsp;
                        <button onClick={this.showData}>显示提示效果</button>&nbsp;
                        <input ref={c=>this.input2=c} type='text' onBlur={this.showData1} placeholder="失去按钮提示" id="aa1"/>
                    </div>
                    /* 以上两种ref的赋值方式属于： 回调函数 */
                )
            }
            showData = ()=>{
                 console.log(this.input1.value);
            }
            showData1 = ()=>{
                console.log(this.input2.value);
            }
        }

二. React.createRef() 调用(官方推荐)

//创建类式组件
 //创建类式组件
        class Demo extends React.Component{
            myRef = React.createRef()
            myRef2 = React.createRef()
            //React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是"专人专用"
            //推荐 ref方法
            render(){
                return (
                    <div>
                        <input ref={this.myRef} type='text' placeholder="点击按钮提示" id="aa"/>&nbsp;
                        <button onClick={this.showData}>显示提示效果</button>&nbsp;
                        <input ref={this.myRef2} type='text' onBlur={this.showData1} placeholder="失去按钮提示" id="aa1"/>
                    </div>
                   
                )
            }
            showData = ()=>{
                 let input1 = this.myRef.current;
                 console.log(input1.value);
            }
            showData1 = ()=>{
             
               console.log( this.myRef2.current.value);
            }
        }