React -- ref

Ref

Demo 组件: 点击按钮后alert输入框中输入的值（需要用ref先获取到 input）

写法一：String 类型 refs (过时API)

<script type="text/babel">
  class Demo extends React.Component {
    handleBtn = () => {
      alert(this.refs.inputRef.value)
    }
    render () {
      return (
        <div>
          <input type="text" ref="inputRef"/>
          <button onClick={this.handleBtn}>click</button>  
        </div>
      )
    }
  }
  ReactDOM.render(<Demo />, document.getElementById("example"))
</script>

写法二：回调 refs

<script type="text/babel">
  class Demo extends React.Component {
    handleBtn = () => {
      alert(this.inputRef.value)
    }
    render () {
      return (
        <div>
          <input type="text" ref={ currentNode => this.inputRef = currentNode } />
          <button onClick={this.handleBtn}>click</button>  
        </div>
      )
    }
  }
  ReactDOM.render(<Demo />, document.getElementById("example"))
</script>

写法三：React.createRef()

<script type="text/babel">
  class Demo extends React.Component {
    myRef1 = React.createRef()
    myRef2 = React.createRef()

    handleBtn = () => {
      alert(this.myRef1.current.value) // 注意：是 current.value
      alert(this.myRef2.current.value)
    }
    render () {
      return (
        <div>
          <input type="text" ref={ this.myRef1 }/>
          <input type="text" ref={ this.myRef2 }/>
          <button onClick={this.handleBtn}>click</button>  
        </div>
      )
    }
  }
  ReactDOM.render(<Demo />, document.getElementById("example"))
</script>