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;

 

posted @ 2018-10-12 17:58  徐同保  阅读(886)  评论(0编辑  收藏  举报