Call function in parent and bind `this` to the child?

Question

What I'm trying to do is call a function defined in a parent element from its child, but bind this to the child calling the function, rather than the parent where the function runs.

Is there a way to do this and would this be an anti-pattern if so? Thank you.

Parent Function to Pass to Child

onSelect = (event => {
  // Some code where `this` is the scope of the child calling the function
  // Not the scope of the parent where the function is defined
}

Parent Render Function

render() {
  return (
    <Child onSelect={this.onSelect} />
   )
}

Child Render Function

render() {
  return (
    <button onClick={this.props.onSelect.bind(this)} />
  )
}

Answer 1

The problem is you're defining onSelect as an arrow function, so it closes over this rather than using the this it was called with. Just make it a method or non-arrow function:

class Parent extends React.Component {
  onSelect() {
    console.log(this.constructor.name);
    console.log(this.note);
  }
  render() {
    return <Child onSelect={this.onSelect} />;
  }
}
class Child extends React.Component {
  constructor(...args) {
    super(...args);
    this.note = "I'm the child";
  }
  render() {
    return (
      <button onClick={this.props.onSelect.bind(this)}>Click Me</button>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

But you might consider binding onSelect once rather than repeatedly (e.g., not in render), perhaps in Child's constructor. But it really only matters if render will get called a lot. E.g.:

class Parent extends React.Component {
  onSelect() {
    console.log(this.constructor.name);
    console.log(this.note);
  }
  render() {
    return <Child onSelect={this.onSelect} />;
  }
}
class Child extends React.Component {
  constructor(...args) {
    super(...args);
    this.note = "I'm the child";
    this.onSelect = this.props.onSelect.bind(this);
  }
  render() {
    return (
      <button onClick={this.onSelect}>Click Me</button>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

Is there a way to do this and would this be an anti-pattern if so?

1. Pass a function (not an arrow function), and bind it in the constructor.

2. It's an anti pattern because the parent needs to be aware of the inner working of the child, and this breaks encapsulation.

How do you do that:

Use a standard method, and not an arrow function:

onSelect(e) {  
  this.setState({
    selected: !!e.target.value
  });
}

Bind the method in the constructor:

constructor(props) {
  super(props);

  this.state = {
    selected: false
  };

  this.onSelect = this.props.onSelect.bind(this);
}

Working example:

const { Component } = React;

class Child extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      selected: false
    };
    
    this.onSelect = this.props.onSelect.bind(this);
  }

  render() {
    const {selected} = this.state;
  
    return (
      <div>
        <input onSelect={this.onSelect} defaultValue="I'm the text" />
        
        <div>{selected ? 'selected' : 'not selected'}</div>
      </div>
    );
  }
}

class Parent extends Component {
  onSelect(e) {  
    this.setState({
      selected: !!e.target.value
    });
  }
  
  render() {
    return (
      <Child onSelect={this.onSelect} />
     )
  }
}


ReactDOM.render(
  <Parent />,
  demo
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>