javascript – ReactJS和谷歌MDL按钮onClick无法正常工作

我有一些JS如下.我发现如果删除mdl-js-layout,按钮的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>
    );
  }
});

如果我查看React调试器工具,我实际上可以看到onClick应该绑定？

解决方法

看起来mdl与react不兼容,并阻止react组件的click事件工作.希望这将在未来的更新中得到修复,但在此之前,您可以通过在安装组件后手动重新添加事件来解决此问题.

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

Demo

javascript – ReactJS和谷歌MDL按钮onClick无法正常工作

解决方法

猜你在找的JavaScript相关文章