Question

我试图在单击触发器时将Modal组件附加到doc正文，但我认为我的语法错误...

openModal() {
    console.log(this.state.isModalOpen);
    this.setState({ isModalOpen: true });
    $('body').append(
    <Modal isOpen={this.state.isModalOpen} transitionName="modal-anim">
      <NewAlbum onClick={this.closeModal}/>
    </Modal>
    )
  }
<button onClick={this.openModal}>Trigger</button>

Answer 1

是的，你错过了一些React的基本原理。您需要让React为您处理渲染。这是您所追求的典型用法：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isModalOpen: false }; 
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    this.setState({ isModalOpen: !this.state.isModalOpen });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleModal}>Trigger</button>
        <Modal isOpen={this.state.isModalOpen} transitionName="modal-anim">
          <NewAlbum onClick={this.toggleModal}/>
        </Modal>
      </div>
    )
  }      
}

我强烈建议您仔细阅读反应文档并获取一些基础：https://facebook.github.io/react/docs/tutorial.html

在onClick函数中将组件追加到body

1 个答案: