react中的ref三种形式

1，字符串形式

  <!-- 创建盒子 -->
  <div id="test">

  </div>   


 <script type="text/babel">
      class Demo extends React.Component{
        render(){
          return(
            <div>
              <input type="text" ref='input1' />
              <button onClick={this.showDate}>点我提示左侧的数据</button>
              <input type="text" onBlur={this.shhowDate1} ref='input2'/>
            </div>
          )
        }
        showDate = () =>{
          console.log(this.refs.input1.value,'input1')
        }
        shhowDate1 = () =>{
          console.log(this.refs.input2.value,'input1')
        }
      }
      ReactDOM.render(<Demo />,document.getElementById('test'))
    </script>

2,回调形式

          /**
           * 1,在标签上使用回调形式
           * <input type="text" ref={c =>this.input1 = c }/>
           * 2,使用获取
           * this.input1
           * **/

  <!-- 创建盒子 -->
  <div id="test">

  </div>

 <script type="text/babel">
      class Test extends React.Component {
        render(){
          return (
            <div>
              <input type="text" ref={c =>this.input1 = c }/>
              <button onClick={this.showDate}>点我</button>
              <input type="text" ref={c =>this.input2 = c}/>
            </div>
          )
        }
        showDate = () =>{
          console.log(this.input1.value)
          console.log(this.input2.value)
        }
      }
      ReactDOM.render(<Test />,document.getElementById('test'))
    </script>

3,createRef形式

        /**
         *  1,引用语法
         * aaa =  React.createRef()
         * 2,定义在标签上
         * <input type="text" ref={this.aaa}/>
         * 3,使用获取
         * console.log(this.aaa.current.value,'this.mydata')
         * **/

    <script type="text/babel">
      class MyComponent extends React.Component{
        /**
         *  1,引用语法
         * React.
         * **/
        mydata = React.createRef()
        mydata1 = React.createRef()
        render(){
          return (
            <div>
              <input type="text" ref={this.mydata}/>
              <button onClick={this.clickDate} >点击</button>
              <input type="text" ref={this.mydata1} onBlur={this.clickDate1}/>
            </div>
          )
        }
        clickDate = () =>{
          console.log(this.mydata.current.value,'this.mydata')
        }
        clickDate1 = () =>{
          console.log(this.mydata1.current.value,'this.mydata1')
        }
      }
      ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    </script>