React-(五-1)組件進階：ref屬性找到DOM

ref 三種用法

ㄧ.傳入字串（官方未來不支援）

補充：componentDidMount是第一次加載到這個組件時，會呼叫的生命週期函式

//Input.vue

// import... 略
class Inputer extends Component{
    componentDidMount(){
        this.refs.msgInput.focus();
    }
    render(){
        return(
            <h3>Input Your message</h3>
            <input type="text" ref="msgInput"/> 
        )
    }
}

執行結果

二. 傳入函式

• 第 7 行，函式的參數 tag 就是呼叫該函式的 DOM 元素，也就是第 13 行的input

//inputer.js
// import... 略
class Inputer extends Component{
    componentDidMount(){
        this.msgInput.focus();
    }
    setMsgInputRef = (tag)=>{
        this.msgInput = tag;
    }
    render(){
        return(
            <h3>Input Your message</h3>
            <input type="text" ref="this.setMsgInputRef"/> 
        )
    }
}

也可以直接在函式中去執行 focus()

//inputer.js
// import... 略
class Inputer extends Component{
    setMsgInputRef = (tag) => {
        tag.focus();
    }
    render(){
        return(
            <h3>Input Your message</h3>
            <input type="text" ref="this.setMsgInputRef"/> 
        )
    }
}

三. 使用 createRef(官方推薦作法）

• 第 3 行，引入 React 的 createRef 方法
• 第 6 行，將 createRef 執行過後的結果回傳值指定給一個變數
• 接著在生命週期函式中，第 9 行，記得要加上 .current 拿取到 ref

  //inputer.js
  
  import React, { Component, createRef} from 'react';
  
  class Inputer extends Component {
    msgInput = createRef();
    
    componentDidMount(){
      this.msgInput.current.focus();
    }
    
    render(){
      return (
        <div>
          <h3>Enter your message</h3>
          <input type="text" ref={this.msgInput}/>
        </div>
      )
    }
  }
  
  export default Inputer;