开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

3、ref

理解

组件内的标签可以定义ref属性来标识自己

编码

1. 字符串形式的ref

2. 回调形式的ref

3. createRef创建ref容器·

前置准备

还是需要准备一个div容器，之后再引入react需要的三个库

     <!-- 准备好一个“容器” -->
     <div id="test"></div>
     
     <!-- 引入react核心库 -->
     <script type="text/javascript" src="../js/react.development.js"></script>
     <!-- 引入react-dom，用于支持react操作DOM -->
     <script type="text/javascript" src="../js/react-dom.development.js"></script>
     <!-- 引入babel，用于将jsx转为js -->
     <script type="text/javascript" src="../js/babel.min.js"></script>

字符串形式的ref

这种形式已过时，效率不高，官方不建议使用。

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

回调函数式的ref

要点：

• c => this.input1 = c 就是给组件实例添加 input1 属性，值为节点
• 由于是箭头函数，因此 this 是 render 函数里的 this ，即组件实例

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

在本文中关于ref的代码，采取的是类式组件的形式，之后下一节，将采取函数式组件的形式，更好的书写ref属性。