1⃣字符串形式的refs

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

<aside> 🔥 字符串形式的ref官方已经不推荐使用

</aside>

案例：

需求: 自定义组件, 功能说明如下: 2. 点击按钮, 提示第一个输入框中的值 3. 当第2个输入框失去焦点时, 提示这个输入框中的值

效果图：

Untitled

//展示左侧输入框的数据
        showData = () => {
            //原生js 通过id 获取input框 获取到它的值 这边不展示了 ref 就类似id react 通过它获取input 框
            //这样就能通过this 获取的 ref指向的input了 所有ref 都在 refs 对象里面
            console.log(this)
        };
       
        render() {
          return (
            <div>
              <input type="text" ref="input1" placeholder="点我提示数据" />&nbsp;
				.....

refs里面的 input key 对应的值就是input组件

Untitled