React中使用 ref 和 findDomNode

對于 React 元件來說，refs 會指向一個元件類的執行個體，是以可以調用該類定義的任何方法。

如果需要通路該元件的真實 DOM，可以用 ReactDOM.findDOMNode 來找到 DOM 節點，但我們并

不推薦這樣做。因為這在大部分情況下都打破了封裝性，而且通常都能用更清晰的辦法在 React

中建構代碼。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Comp extends Component {
    inner() {
      console.log('inner')
    }
    render() {
        return (
          <div>
            <input type="input"/>
          </div>
        )
    }
}

class App extends Component {
    constructor () {
      super()
    }    
    componentDidMount () {
      const myComp = this.refs.myComp;
      myComp.inner();  //通路子元件的函數
      const dom = ReactDOM.findDOMNode(myComp);
      dom.childNodes[0].value = 'hello';
      dom.childNodes[0].focus();
    }
    render() {
        return (
          <div>
            <Comp ref="myComp" />
          </div>
        );
    }
}

export default App;