Q:

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

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

A:

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

Pass a function (not an arrow function), and bind it in the constructor.
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>

