const domCom = <button type="button">button</button>;
const refDom = ReactDOM.render(domCom，container);
//ConfirmPass的組件內(nèi)容省略
const refCom = ReactDOM.render(<ConfirmPass/>,container);
console.log(refDom);
console.log(refCom);

1. 字符串形式的ref

import React, { Component } from 'react'

export default class index extends Component {
  showData = () => {
    // 獲取input節(jié)點
    const { inputRef } = this.refs

    // 輸出input值
    console.log(inputRef.value);
  }
  render() {
    return (
      <div>
        <input ref="inputRef" type="text" placeholder="點擊按鈕提示數(shù)據(jù)"/>&nbsp;
        <button onClick={ this.showData }>點我提示輸入框值</button>
      </div>
    )
  }
}

2. create形式的ref

import React, { Component } from 'react'

export default class index extends Component {
// React.createRef調(diào)用后返回一個容器，存儲被ref標(biāo)識的節(jié)點，單一使用。也就是說，沒定義一個ref就要調(diào)用一次React.createRef
  inputRef = React.createRef()

  showData = () => {
    const refVal = this.inputRef.current

    console.log(refVal.value);
  }
  render() {
    return (
      <div>
        <input ref={ this.inputRef } type="text" placeholder="點擊按鈕提示數(shù)據(jù)"/>&nbsp;
        <button onClick={ this.showData }>點我提示輸入框值</button>
      </div>
    )
  }
}

3. 回調(diào)函數(shù)形式的ref

import React, { Component } from 'react'

export default class index extends Component {
  showData = () => {
    const { inputRef } = this

    console.log(inputRef.value);
  }
  render() {
    return (
      <div>
        {/* 這里傳入一個回調(diào)函數(shù) */}
        <input ref={ currentNode => this.inputRef = currentNode } type="text" placeholder="點擊按鈕提示數(shù)據(jù)"/>&nbsp;
        <button onClick={ this.showData }>點我提示輸入框值</button>
      </div>
    )
  }
}