ReactJS e Google MDL Button onClick non funziona

Question

Ho alcuni JS come di seguito. Trovo che se rimuovo mdl-js-layout il pulsante onClick funziona. Altrimenti fallisce. Perché potrebbe essere? Ho già fatto 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> 
    ); 
    } 
}); 

Se guardo negli strumenti Reagire debugger, posso effettivamente vedere l'onClick dovrebbe essere vincolato?

Answer 1

Sembra mdl non è compatibile con la reazione, e previene gli eventi click dal componente reagire da lavorare. Si spera che ciò possa essere risolto in un aggiornamento futuro, ma fino ad allora, è possibile aggirare questo problema aggiungendo manualmente gli eventi dopo aver montato il componente.

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

Demo

Answer 2

Speriamo this risponde alla tua domanda: Con le risorse utilizzate a quanto pare non ha bisogno di toccare il 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') 
);