Question

我在使这段代码工作时遇到了麻烦。当我单击按钮时，组件应重新渲染并成为h1标记。这段代码编译，问题是当我点击“Open Modal”按钮时没有任何反应。

这是我的最后一个版本。我很反应。因为我的无知而提前道歉。有什么想法吗？

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

Aditionaly，我在控制台中收到此错误（虽然错误，页面呈现并且工作正常）

未捕获错误：找不到模块“./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上的演示看看错误，您似乎正在使用捆绑器。问题可能是因为错误可能在事件绑定之前抛出，所以在点击时没有绑定。

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

onClick没有在React js中触发

1 个答案: