ReactJS＆谷歌MDL按鈕onClick不工作

Question

我有一些像下面的JS。我發現，如果我刪除mdl-js-layoutonClick的按鈕的作品。否則失敗。爲什麼會這樣呢？我已經做了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> 
    ); 
    } 
}); 

如果我期待到陣營調試工具，其實我可以看到的onClick應該被約束？

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') 
);