1、在dom元素中使用ref

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
  //在dom元素上使用ref
  class App extends React.Component{
    constructor(props){
      super(props)
      this.textInput = React.createRef()
      this.focusTextInput = this.focusTextInput.bind(this)
    }
    focusTextInput(){
      this.textInput.current.focus()
    }
    render(){
      return (
      <div>
        <input type="button" onClick={this.focusTextInput} value="獲取焦點" />
        <input type="text" ref={this.textInput} />
      </div>
      )
    }
  }
  ReactDOM.render(<App />, document.getElementById('root'));
</script>

2、為class元件新增refs

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
  class CustomeInput extends React.Component{
    constructor(props){
      super(props)
      this.textInput = React.createRef()
      this.textInputFocus = this.textInputFocus.bind(this)
      
    }
    textInputFocus(){
      this.textInput.current.focus()
    }
    render(){
      return (
      <React.Fragment>
        <input readOnly type="button"  value="點選我"  />
        <input onChange={()=>{}} ref={this.textInput} value="Focus the text input"  />
      </React.Fragment>
      )
    }
  }
  
  class App extends React.Component{
    constructor(props){
      super(props)
      this.textInput = React.createRef()
    }
    componentDidMount(){
      this.textInput.current.textInputFocus()
    }
    render(){
      return (
      <div><CustomeInput  ref={this.textInput} /></div>
      )
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('root'));
</script>

3、通過轉發的方式將將 DOM Refs 暴露給父元件

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
//利用forwardRef 將ref轉發給dom元素的button
const FancyButton = React.forwardRef((props,ref)=>(
    <button ref={ref} onClick={props.onClick}>
    {props.children}
    </button>
))

class App extends React.Component{
    constructor(props){
        super(props)
        this.ref = React.createRef()
        this.clickHandle = this.clickHandle.bind(this)
    }
    clickHandle(){
        console.log(this.ref.current)
    }
    render(){
        return (
            <FancyButton ref={this.ref} onClick={this.clickHandle}>clickME</FancyButton>
        )
    }
}
</script>

4、回到refs

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
  //回撥refs
  class App extends React.Component{
    constructor(props){
      super(props)
      this.inputText=null;
      this.setInputRef = (element)=>{
        this.inputText = element;
      }
      this.focusTextInput=()=>{
        if(this.inputText) this.inputText.focus()
      }
    }
    componentDidMount(){
      this.inputText.focus()
    }
    render(){
      return (
      <div>
        <input type="button" value="點選" onClick={this.focusTextInput} />
        <input ref={this.setInputRef} onChange={()=>{}} value="inputfocus" />
      </div>
      )
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('root'));
</script>