点击按钮后，在Gatsby中打开模态窗口

Question

我正在开发一个关于捐赠的网站，使用的是Gatsby v2 (Reactjs)技术。我需要一个示例，例如使用Gatsby或ReactJS，在点击“捐赠”按钮时打开模态窗口。我在互联网上搜索了一番，但没有找到相关资料。

提前致谢。

- Ragnar Lodbrok

---

你可以使用 react-modal 包。 - 0xc14m1z

Answer 1

这是一个简单的（Gatsby）页面，它使用react-modal作为示例。在这个示例中，我替换了使用CLI生成的Gatsby v2新启动站点中的默认IndexPage。

import React, { Component } from 'react'
import ReactModal from 'react-modal'
import { Link } from 'gatsby'

import Layout from '../components/layout'

ReactModal.setAppElement('#main')

class IndexPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isModalOpen: false,
    }
  }
  handleModalOpen = event => {
    // console.log('handleModalOpen: ', event);
    this.setState({ isModalOpen: true })
  }

  handleModalClose = event => {
    // console.log('handleModalOpen: ', event);
    this.setState({ isModalOpen: false })
  }

  render() {
    return (
      <Layout>
        <div id="main">
          <h1>Hi people</h1>
          <p>Welcome to your new Gatsby site.</p>
          <p>Now go build something great.</p>

          <Link to="#" onClick={this.handleModalOpen}>
            Donate Now
          </Link>
        </div>
        <ReactModal
          isOpen={this.state.isModalOpen}
          onRequestClose={this.handleModalClose}
          contentLabel="Example Modal In Gatsby"
        >
          <h2>Donate</h2>
          <button onClick={this.handleModalClose}>Close Modal</button>
        </ReactModal>
      </Layout>
    )
  }
}

export default IndexPage

那应该能帮助你入门了。最好阅读一下如何在这个例子中扩展 使用react-modal（或者使用其他替代方案）。

- Wendo

Answer 2

首先，上面的示例无法工作，因为 #main 不存在，现在 Gatsby 应用程序的 ID 是 ___gatsby，所以它应该看起来像这样：

ReactModal.setAppElement('#___gatsby')

但是希望这个ID在未来不会改变并不是一个好的做法。因此最好实现自己的React模态框组件，这里有一个很好的例子：https://www.digitalocean.com/community/tutorials/react-modal-component

- Alexander Cherednichenko