ReactJS＆Google MDLボタンonClickが動作しない

Question

私は以下のようなJSを持っています。 mdl-js-layoutを削除すると、ボタンのonClickが機能することがわかります。それ以外の場合は失敗します。これはなぜでしょうか？私はすでにのonClickが拘束されることになっている私が反応デバッガツールに見れば、私が実際に見ることができますcomponentHandler.upgradeDom()

'use strict'; 

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

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

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

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

をやっていますか？

Answer 1

それはMDLが反応と互換性がないように見える、と作業から反応するコンポーネントからのクリックイベントを防ぎます。うまくいけば、これは将来のアップデートで修正されるだろうが、それまではコンポーネントをマウントした後にイベントを手動で再追加することで対処できる。

componentDidMount: function() { 
    componentHandler.upgradeDom(); 
    var button = this.refs.btnAddExpense; 
    button.addEventListener('click', this.addExpense); 
}, 

Demo

Answer 2

うまくいけばthisは、あなたの質問に答える：資源を活用し は、それが明らかにDOMをタッチする必要はありません使用。

HTML 
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"> 
</script> 

<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 

JS 
var Widget = React.createClass({ 
    handleBtnClick: function(e) { 
    e.preventDefault(); 
    alert("clicked!"); 
    return true; 
    }, 

    render: function() { 
    return <div > 
     <form> 
     < button className = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-textfield--full-width mdl-button--facebook" 
      onClick = { 
      this.handleBtnClick 
      } > 
      Click MEEEEEE! 
     </button> </form> </div>; 
    } 
    }); 

    ReactDOM.render(< Widget/> , 
    document.getElementById('container') 
);