今天我們要來介紹什麼是Refs，Refs提供了一種訪問在 render 方法中創建的 DOM 節點或 React 元素的方法，你可以透過使用createRef 或 useRef語法來直接操作DOM，那Ref的實際功能呢?

refs能做到甚麼?

• 可以管理你滑鼠點擊的焦點
• 觸發命令式動畫。
• 與第三方 DOM 庫集成。
• 文本的選擇
• 媒體播放

創建一個refs

class DEMO extends React.Component {
  constructor(props) {
    super(props);
    this.Ref = React.createRef();
  }
  render() {
    return <div ref={this.Ref} />;
  }
}

那我們就利用refs來做一個範例吧

class App 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="點擊提示"/>
              <button  onClick={this.showData}>點我提示</button>
              <input ref="input2" onBlur={this.showData2} type="text"placeholder="失去焦點提示"/>

          </div>
      )
  }
}

這是一個對話框的範例，當我們輸入左邊對話框之後，點擊提示按鈕就會跳出警示，而輸入右邊對話框之後，只要讓對話框失去焦點就可以跳出警示，其實這項功能用html預設的功能就可以做到，但是利用了ref屬性後可以減少我們寫程式所花費的時間，也可以更直覺地去思考，例如ref可以用id去代替，但是上方的showData就會變得很複雜。
這是輸出結果和示範影片

參考文章:

https://reactjs.org/docs/rendering-elements.html