在create-react-app建立的專案下允許函式繫結運算子

前話

React的函式繫結一致是個問題，主要有下面幾種方式：

• 事件處理器動態繫結

export default class Com extends React.Component {
    render() {
        <input type="button" value="點我" onClick={this.method.bind(this)} />
    }
}

• 建構函式繫結

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this.method = this.method.bind(this);
    }

    render() {
      <input type="button" value="點我" onClick={this.method} />
    }
}

• 建構函式 + 箭頭函式

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this.method = (ev) => {...}
    }

    render() {
       <input type="button" value="點我" onClick={this.method} />
    }
}

• 通過bael的babel-plugin-transform-class-properties

這個是babel支援的，還不是標準

export default class CartItem extends React.Component {
      
    method = () => {...};

    render() {
       <input type="button" value="點我" onClick={this.method} />
    }
}

• stage 0 的 transform-function-bind

export default class CartItem extends React.Component {
      
    method(){...};

    render() {
         <input type="button" value="點我" onClick={::this.method} />
    }
}

最後一種很帥氣， 然並軟，我使用就直接報錯。 臣不服，不服。
於是尋找方案， 因為是create-react-app建立的專案。
我的思考方案如下

• create-react-app內建支援的配置
  在awesome-create-react-app中找到how-to-use-custom-babel-presets, 看到了光芒，光芒啊。
  高興太早，死的也早，Adding support for custom babel configuration被拒絕了，大致是，想法非常好，非常好，就是不能。那麼，我走下一條路
• npm run eject
  採用eject後，會多出很多檔案，並且是不可逆向的。
  噁心，噁心，那麼多檔案。我要出去透透氣。
• react-app-rewired
  這個比較簡單一些。
  尋尋覓覓找到了injectbabelplugin
  然後找到對應的外掛babel-preset-stage-0,babel-plugin-transform-function-bind

const rewireMobX = require(`react-app-rewire-mobx`);
const rewireEslint = require(`react-app-rewire-eslint`);
const {injectBabelPlugin} = require(`react-app-rewired`);

/* config-overrides.js */
module.exports = {
    webpack: function override(config, env) {
        config = rewireEslint(config, env);
        config = rewireMobX(config, env);
        config = injectBabelPlugin(`transform-function-bind`,config)


        config.output.publicPath = ``
        return config;
    }
}

修改完畢，啟動，哦，可以。 真是不錯。
扔掉鍵盤，甩開滑鼠，深深的一口水，想寫行程式碼咋這麼難。

React and ES6 – Part 3, Binding to methods of React class (ES7 included)
decorator
create-react-app
how-to-use-custom-babel-presets
Adding support for custom babel configuration #1357
react-app-rewired
injectbabelplugin
babel-preset-stage-0
babel-plugin-transform-function-bind