javascript - React ref 组件不暴露方法

Question

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

在同一个组件中我们有:

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
  }
}

控制台日志输出:

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

在我看来，一切都是根据 official docs 完成的.但是，我收到以下错误:

Uncaught TypeError: this.filterForm.reset is not a function

at SalesChannelsList.handleFilterReset

谢谢

Answer 1

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

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

injectIntl(SalesChannelsFilterForm, { withRef: true })

2) 在组件的 ref 回调中，您可以使用以下代码访问您的实例

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

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

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

ref={::this.setFilterFormRef}

然后处理程序:

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

尽情享受吧!