将 ref 反应到组件不暴露方法答案

【问题标题】：React ref to component not exposing method将 ref 反应到组件不暴露方法
【发布时间】：2017-10-02 07:57:00
【问题描述】：

我正在使用对组件的引用来强制触发其父级过滤器表单的重置。

在同一个组件中：

handleFilterReset() {
  // this.filterForm is defined but reset() isn't exposed
  // see console.log(this.filterForm) output below
  this.filterForm.reset()
}

render() {
  return (
    <FilterBox onReset={::this.handleFilterReset}>
      <FilterForm ref={(ref) => { this.filterForm = ref }} />
    </FilterBox>
  )
}

在 FilterForm 中我们有：

class FilterForm extends React.Component {
  reset() {
    // this is not being called
  }
}

console.log 输出：

ProxyComponent {props: Object, context: Object, refs: Object, updater: Object, _reactInternalInstance: ReactCompositeComponentWrapper…}

在我看来，一切都是按照official docs 完成的。但是，我收到以下错误：

未捕获的类型错误：this.filterForm.reset 不是函数

在 SalesChannelsList.handleFilterReset

谢谢

【问题讨论】：

非常基本的建议 Thibaut，可能是 React 版本的东西，但根据提供的文档，它应该是 class FilterForm extends React.Component - 你错过了 React.。
@Gorbles，也许他会忘记在帖子里写，但如果你像import React, {Component} from 'react'一样导入，你可以这样做
您正在使用::进行绑定，您可以尝试使用handleFilterReset = () => {并像<FilterBox onReset={this.handleFilterReset}>一样调用
@Gorbles 实际上我使用 import React, { Component } from 'react'。我试图在示例中使代码尽可能简单以过滤掉噪音，但我将编辑问题以便澄清事情:)
@ShubhamKhatri 试过了，还是不行。正在调用 handleFilterReset()，所以我认为问题不在这里......

标签： javascript reactjs

【解决方案1】：

找到了！这是“因为” React Intl。

1) 使用 injectIntl 时将 withRef 选项设置为 true：

injectIntl(SalesChannelsFilterForm, { withRef: true })

2) 在你的组件的 ref 回调中，你可以通过如下代码访问你的实例

ref={(ref) => this.filterForm = ref.refs.wrappedInstance}

但是这会崩溃，因为在 render() 期间调用了 ref 回调两次，第一次使用 null 值。因此，您应该首先验证它是否已被定义。我的完整解决方案：

在 render() 方法中，在组件上：

ref={::this.setFilterFormRef}

然后是处理程序：

setFilterFormRef(ref) {
  if (ref && ref.refs) {
    this.filterForm = ref.refs.wrappedInstance
  }
}

享受吧！

【讨论】：

【解决方案2】：

我会使用 ref="refName" 而不是使用函数（每次渲染都会重新创建），然后通过 this.refs 访问它。

无论如何，这是一个工作示例：

https://www.webpackbin.com/bins/-KjHtMcw3LcVEycggzWU

【讨论】：

谢谢@jony89。这是我最初的解决方案，它也不起作用。顺便说一句，现在不推荐使用字符串引用（参见官方文档：facebook.github.io/react/docs/refs-and-the-dom.html）。
所以请提供您的完整代码，因为它应该可以工作。
好的，通过进一步调试，我可以获得以下见解：ref 不是常规组件实例，而是 ProxyComponent（正如最初问题的 console.log 中所示）。这是因为被引用的组件实际上是从一个基类获取的：getFilterForm() { return SalesChannelsFilterForm }。但是，即使使用 return ，我也找不到可行的解决方案。