ReactJS & Google MDL onClick button not working

Question

I have JS as shown below. I find that if I remove mdl-js-layout , the onClick button of the button works. Otherwise, it fails. Why could this be? I already made 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> ); } }); 

If I look at the React debugging tools, can I see how onClick is supposed to link?

Answer 1

It seems that mdl is incompatible with the reaction and prevents clicks from reacting the component. We hope that this will be fixed in a future update, but until then you can work around this by manually re-adding events after installing the component.

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

Demo

Answer 2

Hope this answers your question: When using resources, apparently there is no need to touch the DOM.

 HTML <script src="https://facebook.imtqy.com/react/js/jsfiddle-integration-babel.js"> </script> <div id="container"> <!-- This element 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') );