Bind all solutions

createClass.jsx

import React, {createClass} from 'react';

class MediaLibrary = createClass({
    foo() {
      this.setState({foo: !this.state.foo})
    },
    render() {
        return (<Bar onFoo={this.foo} />);
    }
}

decorator.jsx

import React, {Component} from 'react';
import bindAll from 'util/class';

@bindAll
class MediaLibrary extends Component {
    foo() {
      this.setState({foo: !this.state.foo})
    }
    render() {
        return (<Bar onFoo={this.foo} />);
    }
}

localArrow.jsx

import React, {Component} from 'react';

class MediaLibrary extends Component {
    foo() {
      this.setState({foo: !this.state.foo})
    }
    render() {
        return (<Bar onFoo={() => this.foo()} />);
    }
}

localbind.jsx

import React, {Component} from 'react';

class MediaLibrary extends Component {
    foo() {
      this.setState({foo: !this.state.foo})
    }
    render() {
        return (<Bar onFoo={this.foo.bind(this)} />);
    }
}

manualShadow.jsx

import React, {Component} from 'react';

class MediaLibrary extends Component {
    constructor(){
      super()
      this.foo = this.foo.bind(this);
    }
    foo() {
      this.setState({foo: !this.state.foo})
    }
    render() {
        return (<Bar onFoo={this.foo} />);
    }
}

wrapComponent.jsx

import React from 'react';
import Component from 'util/reactExt';

class MediaLibrary extends Component {
    foo() {
      this.setState({foo: !this.state.foo})
    }
    render() {
        return (<Bar onFoo={this.foo} />);
    }
}

Notes:

• local binds create new function instances on every invocation of render
• decorator is a pretty raw TC39 proposal and requires an experimental babel plugin