ReactJS & Google MDL Button onClick not working
<p>I have some JS like below. I find that if I remove <code>mdl-js-layout</code> the <code>onClick</code> of the button works. Otherwise it fails. Why might this be? I have already did <code>componentHandler.upgradeDom()</code></p>

<pre><code>'use strict';

module.exports = React.createClass({
  componentDidMount: function() {
    console.log('update')
    componentHandler.upgradeDom();
  },

  addExpense: function() {
    console.log('add expense');
  },

  render: function() {
    return (
      &lt;div ref="appLayout" className="mdl-layout mdl-js-layout mdl-layout--fixed-drawer"&gt;
        &lt;div className="mdl-layout__drawer"&gt;
          &lt;span className="mdl-layout-title"&gt;Expenses&lt;/span&gt;
          &lt;nav className="mdl-navigation"&gt;
            &lt;a className="mdl-navigation__link" href="#"&gt;Expenses&lt;/a&gt;
            &lt;a className="mdl-navigation__link" href="#"&gt;Settings&lt;/a&gt;
          &lt;/nav&gt;
        &lt;/div&gt;

        &lt;main className="mdl-layout__content"&gt;
          &lt;div className="page-content"&gt;
            &lt;div className="mdl-grid"&gt;
              &lt;div className="mdl-cell mdl-cell--12-col"&gt;
                &lt;button ref="btnAddExpense" onClick={this.addExpense} className="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"&gt;
                  Add Expense
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
});
</code></pre>

<p>If I look into the React debugger tools, I can actually see the onClick is supposed to be bound? </p>

<p><a href="https://i.stack.imgur.com/2jb4s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2jb4s.png" alt="enter image description here"></a></p>