react---ref转发

转发refs :

• 是react当中提供的一个ref的数据（不能在无状态组件当中来进行使用 因为无状态组件没有实例）
• 表示当前组件的真正实例的引用 他会返回绑定当前属性的元素
• 标识组件内部的元素–方便我们查找

react给我们提供了三种方式进行ref的使用

<mark>实现点击在控制台打印输入的数据值</mark>

1.字符串的方式

 class Com extends React.Component{
        fun=()=>{
        console.log(this.refs.demoInput.value);
        }
         render(){
            return(
                <div>
                    我是组件
                    <input type="text" placeholder="请输入" ref="demoInput"/>
                    <button onClick={this.fun}>点我获得输入框的值</button>
                 </div>
                            )
        }
    }
     ReactDOM.render(<Com  />,document.getElementById('demoReact'));

2.回调函数(推荐)
就是在dom节点上或者组件上挂载函数 函数的入参（形参） 是dom节点 达到的它的效果字符串的方式是一样的，都是获取值的引用

class Com extends React.Component{
        fun=()=>{
        console.log(this.textInput.value);
        }
         render(){
            return(
                <div>
                    我是组件
                    <input type="text" placeholder="请输入" ref={(input)=>{this.textInput=input}}/>
                    <button onClick={this.fun}>点我获得输入框的值</button>
                     </div>
                            )
        }
    }
     ReactDOM.render(<Com  />,document.getElementById('demoReact'));

3.React.createRef() react 16.3新提供的一种方式
把值赋给一个变量 通过ref挂载在系欸但或者组件上 使用ref的current属性拿到这个节点

 class Com extends React.Component{
        constructor(props){
            super(props);
            this.myRef=React.createRef();
        }
        fun=()=>{
            console.log(this.myRef.current.value);
        }
        render(){
            return(
                <div>
                    我是组件

                    <input type="text" placeholder="请输入" ref={this.myRef}/>
                    <button onClick={this.fun}>点我获得输入框的值</button>
                </div>
            )
        }
    }
        ReactDOM.render(<Com  />,document.getElementById('demoReact'));

官方当中建议我们 不要过渡的使用refs对逻辑进行处理， 需要优先考虑state