Ref response on non-method-affected component

Question

Ref response on non-method-affected component

I am using ref on a component to force a filter form reset from its parent.

In the same component, we have:

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

And in FilterForm we have:

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

console.log output:

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

It seems to me that everything is done in accordance with the official documents. However, I am getting the following error:

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

at SalesChannelsList.handleFilterReset

thank

+3

javascript reactjs

Thibaut May 04 '17 at 8:34

source to share

2 answers

I would use ref = "refName" instead of a function (which is created again for every render) and then access it via this.refs

.

Anyway, here's a working example:

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

+1

jony89 04 May '17 at 10:01

source to share

Thibaut · Accepted Answer · 2017-05-09T06:58:04+0000

Found! It was "because" from React Intl.

1) Use withRef parameter to true when using injectIntl:

injectIntl(SalesChannelsFilterForm, { withRef: true })

2) In the ref callback of your component, you can access your instance with the following code

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

However, this will crash because the ref callback is called twice during render (), the first time with a null value. Therefore, you should first of all make sure that it is defined. My complete solution:

In the render () method on the component:

ref={::this.setFilterFormRef}

Then the handler:

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

Enjoy!

Ref response on non-method-affected component

More articles: