react中组件实例三大属性之一ref介绍以及用法

1）ref有四种使用方式，字符串方法，回调函数，自定义函数，还有createRef ，其中最经常用的是回调函数（箭头函数的形式），比较简便的是字符串的形式
2）使用ref的作用主要是获取到绑定ref的节点，通过节点去获取这个节点上面需要使用的信息
接下来，一个一个介绍四种使用方式

1. 字符串形式的ref
   绑定：使用 ref=“标识名称”
   获取对应的ref节点：this.refs.标识名称

<script type="text/babel">
        // 1.创建组件
        class Demo extends React.Component{
            // 展示左侧输入框的数据
            showData=()=>{
                const {input1}=this.refs
                alert(input1.value)
            }
            render(){
                return(
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                    </div>
                )
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

2. 回调函数

1. 组件内的标签都可以定义ref属性来标识自己
   a. this.msgInput = input}/>
   b. 回调函数在组件初始化渲染完或卸载时自动调用
2. 在组件中可以通过this.msgInput来得到对应的真实DOM元素
3. 作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

    <script type="text/babel">
        // 1.创建组件
        class Demo extends React.Component{
            // 展示左侧输入框的数据
            showData=()=>{
                const {input1}=this
                alert(input1.value)
            }
            showData2=()=>{
                const {input2}=this
                alert(input2.value)
            }
            // 此处ref里面的箭头函数不用我们调用，react会自动调用，箭头函数里面收到的参数就是当前ref所处的节点
            render(){
                return(
                    <div>
                        <input ref={currentNode=>this.input1=currentNode} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={currentNode=>this.input2=currentNode} type="text" placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

3. 自定义函数

    <script type="text/babel">
        // 1.创建组件
        class Demo extends React.Component{
            state={isHot:true}
            showInfo=()=>{
                const {input1}=this
                alert(input1.value)
            }
            changeWeather=()=>{
                const isHot=this.state
                this.setState({isHot:!isHot})
            }
            saveInput=(c)=>{
                this.input1=c;
                console.log('@',c)
            }
            render(){
                return(
                    <div>
                        <h2>今天天气很{this.state.isHot?'炎热':'凉爽'}</h2>
                        {/* {this.input1=currentNode;console.log('@',currentNode)}} type="text"/> 

 */}
                        <input ref={this.saveInput} type="text"/>
                        <button onClick={this.showInfo}>点我提示输入的数据</button>
                        <button onClick={this.changeWeather}>点击切换天气</button>
                    </div> 
                )
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

4. createRef

    <script type="text/babel">
        // 1.创建组件
        class Demo extends React.Component{
            /* 
                React.createRef调用后可以返回一个容器，该容器可以储存被ref所标识的节点,该容器是专人专用的
            */
            myRef=React.createRef()
            myRef2=React.createRef()
            // 展示左侧输入框的数据
            showData=()=>{
                alert(this.myRef.current.value)
            }
            showData2=()=>{
                alert(this.myRef2.current.value)
            }
            // 此处ref里面的箭头函数不用我们调用，react会自动调用，箭头函数里面收到的参数就是当前ref所处的节点
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} type="text" ref={this.myRef2} placeholder="点击按钮提示数据"/>
                    </div>
                )
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>