ReactJS 和 Google MDL 按钮 onClick 不起作用

Question

我有一些像下面这样的 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 应该被绑定？

Answer 1

看起来 mdl 与 react 不兼容，并阻止了来自 react 组件的点击事件。希望这会在未来的更新中得到解决，但在此之前，您可以通过在安装组件后手动重新添加事件来解决此问题。

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