javascript - react中怎样在父组件中获取子组件中的Dom-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

ringa_lee 2017-04-10 18:06:33

[JavaScript讨论组]

502

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

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

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

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

结果控制台输出的是undefined:

请大侠们解答谢谢了。

ringa_lee

全部回复(3)

大家讲道理2017-04-10 18:08:33 3楼

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

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

class Childed extends PureComponent {

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