import React from "react";

export default class SampleComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        <button onClick={this.onClick.bind(this)}>click</button>
      </React.Fragment>
    )
  }

  onClick() {
    // 省略
  }
}

って書く事ありませんかと。ようは「this.onClick.bind(this)」って書くのダルくないですかってことなんですが

ってことで単純にES7のfunction bindを使う事で解決出来る模様

インストール

npm install --save-dev babel-plugin-transform-function-bind

.babelrc

{
  "plugins": ["transform-function-bind"]
}

上記のコンポーネントを修正

import React from "react";

export default class SampleComponent extends React.Component {

  render() {
    return (
      <React.Fragment>
        <button onClick={::this.onClick}>click</button>
      </React.Fragment>
    );
  }

  onClick() {
    // 省略
  }
}

他にも方法が色々あるんですがそれは参考を参照

参考: Reactをes6で使う場合のbindの問題

追記

eslintでこのES7 function bind方式をチェックする場合には

{
  "parser": "babel-eslint"
}

にしておけば良い模様。ただしeslint-plugin-reactが入ってる場合にjsx-no-bindによって上記の方法によるbindのショートカット記法自体がひっかかってしまう模様(allowBindをtrueにしない限りはだと思われるけど)

そういう場合にはcore-decoratorsの@autobindを使うっていう手もある模様