Question

我正在使用ref to component来命令性地从其父级触发过滤器表单上的重置。

在同一个组件中我们有：

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完成的。但是，我收到以下错误：

未捕获的TypeError：this.filterForm.reset不是函数

在SalesChannelsList.handleFilterReset

由于

Answer 1

我会使用ref =“refName”而不是拥有一个函数（每次渲染时再次创建），然后通过this.refs访问它。

无论如何，这是一个有效的例子：

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

Answer 2

发现它！这是“因为”React Intl。

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

injectIntl(SalesChannelsFilterForm, { withRef: true })

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

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

享受！

React ref to component not exposure方法

2 个答案: