React: Unable to call function inside child component

Question

I am trying to call a function inside a child component via this.refs, but I keep getting an error so that this function does not exist.

Uncaught TypeError: this.refs.todayKpi.loadTodaysKpi is not a function 

Parent component:

 class KpisHeader extends React.Component { constructor() { super(); this.onUpdate = this.onUpdate.bind(this); } render(){ return <div> <DateRange ref="dateRange" onUpdate={this.onUpdate}/> <TodayKpi ref="todayKpi" {...this.state}/> </div>; } onUpdate(val){ this.setState({ startDate: val.startDate, endDate: val.endDate }, function(){ this.refs.todayKpi.loadTodaysKpi(); }); } } 

I want to get some data from a DateRange component through the onUpdate function, and then I want to call a function inside TodayKpi that retrieves data from the server. At the moment, this is just console.log ("AAA");

Children's component:

 class TodayKpi extends React.Component { constructor() { super(); this.loadTodaysKpi = this.loadTodaysKpi.bind(this); } render(){ console.log(this.props.startDate + " "+ this.props.endDate); return <div className="today-kpi"> </div>; } loadTodaysKpi(){ console.log("AAAA"); } } 

How to implement this?

Answer 1

For reasons that I still don't understand, React does not recommend calling child methods on the parent. However, they soften and give us an "escape hatch" that allows just that. You were right in thinking that “Refs were part of this escape hatch. If, like me, you read dozens of articles looking for this information, you will be well prepared to understand the description of the exit hatch

In your case, you can try something similar in your KpisHeader class.

Change this line

 <TodayKpi ref="todayKpi" {...this.state}/> 

to use the ref callback function:

 <TodayKpi ref={(todayKpiComponent) => this.todayKpiComponent = todayKpiComponent} {...this.state}/> 

or, pre-ES6, this is:

 <TodayKpi ref= { function (todayKpiComponent) { this.todayKpiComponent = todayKpiComponent } } {...this.state} /> 

Then you can access your todayKpi component methods from your KpisHeader class as follows:

 this.todayKpiComponent.someMethod(); 

Oddly enough, for me, inside the ref callback function, it was a window, not a parent component. So I had to add

 var self = this; 

above the render method and use 'self inside the ref callback function.

In my case, I had an unknown number of dynamically generated child components, so I put each into an array. I cleared the array in the WillUpdate component. It seems that everything works, but I had a difficult feeling, especially considering that Reacts is disgusting with calls to child methods.

Answer 2

If you want the function / method to be called inside the child element, you must pass it to the child from the parent in order to start with it. Another thing you need to change: onUpdate to onChange , assuming you want to keep track of all the changes in this field. Another alternative is to check when it is onSubmit , but it looks like you want it to be executed every time the field is updated.