您可以使用类字段在构造函数之外进行绑定。它们如下所示：

class Foo extends React.Component {

  handleBar = () => {
    console.log('neat');
  };

  handleFoo = () => {
    console.log('cool');
  };

  render() {
    return (
      <div
        onClick={this.handleBar}
        onMouseOver={this.handleFoo}
      />
    );
  }

}

Babel 通过其类属性 transform实验性地支持类字段，但它们仍然是“实验性的”，因为它们是第 3 阶段草案（尚未在 Babel 预设中）。

但是，在 ES7 或在 Babel 中启用该功能之前，您需要手动进行绑定。Babel 关于React on ES6+的博客文章中简要介绍了这个主题。

另一种选择是使用装饰器。您在原型上声明了一个 getter，并且在第一次访问实例时，它定义了一个自己的属性，该属性具有该函数的绑定版本。

但是有一个问题！在开发中，它不会替换属性，它会在每次访问时绑定。这意味着您不会破坏 react-hot-loader。至少对我来说，这很重要。

我创建了一个库class-bind，它提供了这个。

import {bound} from 'class-bind';

class App {
  constructor(){
    this.foo = 'bar';
  }

  @bound
  returnsFoo(){
    return this.foo;
  }

  render(){
    var returnsFoo = this.returnsFoo;
    return (
      <div>
        {returnsFoo()} === 'bar'
      </div>
    );
  }
}

装饰器对你来说太不稳定了？您可以绑定具有相同好处的所有内容或某些内容。

import {bind, bindAll} from 'class-bind';

bind(App.prototype, 'returnsFoo');

// or
bindAll(App.prototype);

Ssorallen 的建议很好，但如果你想要另一种方式，有：

    class AppCtrlRender extends Component {
        binder(...methods) { methods.forEach( (method) => this[method] = this[method].bind(this) ); }

        render() {
            var isMobile = this.state.appData.isMobile;
            var messages = this.state.appData.messages;
            return (
                <div id='AppCtrlSty' style={AppCtrlSty}>
                    React 1.3 Slider
                    <br/><br/>
                    <div className='FlexBoxWrap'>
                        <Slider isMobile={isMobile}/>
                        <JList data={messages}/>
                    </div>
                </div>
            );
        }
    }

    var getAppState = function() {
        return {
            appData: AppStore.getAppData()
        };
    };

    export default class AppCtrl extends AppCtrlRender {
        constructor() {
            super();
            this.state = getAppState();
            this.binder('appStoreDidChange');
        }

        componentDidMount() {
            var navPlatform = window.navigator.platform;
            Actions.setWindowDefaults(navPlatform);
        }
        componentWillMount() { AppStore.onAny(this.appStoreDidChange); }
        componentWillUnmount() { AppStore.offAny(this.appStoreDidChange); }
        appStoreDidChange() { this.setState(getAppState()); }
    }

您可以向 this.binder('method1', 'method2', ...) 添加任意数量的方法

如果您使用stage-0，则有一个函数绑定语法。

class MyComp extends Component {

  handleClick() { console.log('doing things') }

  render() {
    return <button onClick={::this.handleClick}>Do Things</button>
  }

}

这会分解为this.handleClick.call(this)，我认为它通常具有足够的性能。

一种避免绑定的想法

class MyComp extends Component {

  render() {
    return <button onClick={e => this.handleClick(e)}>Do Things</button>
  }

}

免责声明：未经测试，也不能轻松处理多个参数（在这种情况下，有一个，事件（e）。

此外，根据这篇可能值得一读的文章，这个答案可能是不该做什么的一个例子：

https://daveceddia.com/avoid-bind-when-passing-props/