将函数传递给子组件this.props.children方法未定义

Question

I need to pass a function to this.props.children with the following.

updateBarTitle(barTItle){
   this.setState({barTItle});
}
render(){
   const children = React.Children.map(this.props.children, function (child) {
        return React.cloneElement(child, {
            updateBarTitle: this.updateBarTitle
        });
      });
   {children}
}

But I keep getting Uncaught TypeError: Cannot read property 'updateBarTitle' of undefined .

Also I would like to ask would this be the best approach? My goal here is to update the parent state based on a child value. So I was thinking either do this. Pass a parent ready made function then the child will update that, or access the child state by the parent. Examples would be of great help.

Answer 1

this in your mapping function is not bound the correct context. You can bind it by passing this as 3-rd argument:

const children = React.Children.map(this.props.children, function (child) {
    return React.cloneElement(child, {
        updateBarTitle: this.updateBarTitle
    });
}, this);

or use arrow function which does not steal context:

const children = React.Children.map(this.props.children, (child) => {
    return React.cloneElement(child, {
        updateBarTitle: this.updateBarTitle
    });
});