javascript - onClick 在 React js 中没有触发

Question

我在使这段代码正常工作时遇到了麻烦。当我单击按钮时，该组件应该重新渲染并成为 h1 标签。这段代码可以编译，问题是当我单击“打开模态”按钮时什么也没有发生。

这是我的最后一个版本。我对react.js还很陌生，所以提前为我的无知道歉。有什么想法吗？

class AddTransactionForm extends React.Component {

      constructor (props) {
        super(props);
        this.state = { modalActive: false };
        this.openModal = this.openModal.bind(this);
      }

      openModal () {
        this.setState({ modalActive: true })
      }

      render () {
        if (this.state.modalActive){
          return(<h1>Active</h1>);
        }else{
          return (
                 <div>
                       <button className="button_" onClick={this.openModal}>Open modal</button>
                 </div>
        );
        }
    }
    }

此外，我在控制台中收到此错误(尽管该错误，页面呈现并且工作正常)

未捕获错误:找不到模块“./components/Transactions” 在bundle.js:17 在对象。 (bundle.js:17) 在 t (bundle.js:1) 在对象。 (bundle.js:17) 在 t (bundle.js:1) 在对象。 (bundle.js:1) 在 t (bundle.js:1) 在bundle.js:1 在bundle.js:1

Answer 1

这工作得很好。请参阅 http://codepen.io/umgupta/pen/dNPPXe 上的演示 查看错误似乎您正在使用捆绑程序。 问题可能是，由于错误可能在事件绑定(bind)之前引发，因此单击时未绑定(bind)。

class AddTransactionForm extends React.Component {

      constructor (props) {
        super(props);
        this.state = { modalActive: false };
        this.openModal = this.openModal.bind(this);
      }

      openModal () {
        this.setState({ modalActive: true })
      }

      render () {
        if (this.state.modalActive){
          return(<h1>Active</h1>);
        }else{
          return (
                 <div>
                       <button className="button_" onClick={this.openModal}>Open modal</button>
                 </div>
        );
        }
    }
    }


ReactDOM.render(
  <AddTransactionForm/>,
  document.getElementById('root')
);