title: ReactJS & Google MDL Button onClick not working
body: <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>