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. <input type=“text” ref={input => this.msgInput = input}/>
   b. 回调函数在组件初始化渲染完或卸载时自动调用
2. 在组件中可以通过this.msgInput来得到对应的真实DOM元素
3. 作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

    <script type="text/babel">