javascript - react中怎样在父组件中获取子组件中的Dom

问题描述

问 题

我想通过父组件的this.refs.addTemplateReport来获取子组件<AddTemplateReport />,是可以获得到的。但是想继续获取子组件<AddTemplateReport />里的Dom就获取不到了。
代码截图如下：

以下是父组件的子组件<AddTemplateReport />在父组件里的代码。
代码截图如下：

子组件<AddTemplateReport />的代码如下：

我在div中添加了ref=epiceditor想通过子组件的refs来获取这个Dom；但是失败了！
我尝试在控制台输出下：

结果控制台输出的是undefined:

请大侠们解答谢谢了。

解决方案

官网已经不推荐使用ref=字符串的形式, 后来就没用了refs这种形式了, 大多是使用ref=() => {}箭头函数的形式来获取

class Parent extends PureComponent {
  componentDidMount() {
    console.log(this.child._input) // 这里就能拿到子组件的input
  }
  render() {
    return (
      <div>
        <Childed ref={r => this.child = r} />
      </div>
    )
  }
}

class Childed extends PureComponent {

  render() {
    return (
      <div>
        <input type="text" ref={r => this._input = r} />
      </div>
    )
  }
}

这篇关于javascript - react中怎样在父组件中获取子组件中的Dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！