Accessing underlying component for custom template?

[gruntruk]

Hi, I have a form in which I'm rendering via a custom template given I'm using a custom component type from React Boostrap within that template. For example:

var options = {
  template: this.renderAccordion
}

...

renderAccordion: function() {
  return <Accordion ref="accordion" onChange={this.onPanelChange}/>
}

The accordion component is not accessible via the usual this.refs from the form's parent component. I'm trying to understand how I can obtain the underlying component instance of the tcomb form's template so that I can utilize its API.

Thanks

[volkanunsal]

I think that should be in the argument given to the callback function, i.e. locals.

renderAccordion: function(locals) {
  return <Accordion ref="accordion" onChange={this.onPanelChange}/>
}

[gruntruk]

Sorry if my question is not clear. I want to access the accordion instance from the onPanelChange callback function. So something like:

onPanelChange: function() {
   // lookup accordion instance to do equivalent of this.refs.accordion.setState({}) 
}

[volkanunsal]

That's tricky. I don't know how to do it exactly. But why can't you access the instance through this.refs.accordion? You may then also need to bind the function to this to make sure you have access to the refs.

renderAccordion: function(locals) {
  return <Accordion ref="accordion" onChange={this.onPanelChange.bind(this)}/>
}
onPanelChange: function(){
   // this.refs.accordion
}

[volkanunsal]

Ah, I think I misunderstood what you were asking again, but the solution should work. :smile:

[gruntruk]

The bind is redundant. Sorry for confusion. The ref is accessible just nested down within the form. So it is accessible (assuming my form is called just 'form') as:

this.refs.form.refs.input.refs.accordion

Thanks for your help!