Гэтсби открывает модальное окно при нажатии кнопки - PullRequest
Новая
       70

Гэтсби открывает модальное окно при нажатии кнопки

0 голосов
/ 18 октября 2018

Я работаю над сайтом о пожертвовании с использованием Gatsby v2 (Reactjs), и мне нужен пример, например, открыть модальное окно при нажатии кнопки пожертвования с помощью Gatsby или ReactJS.Я ищу в интернете и ничего не получил.

Заранее спасибо.

1 Ответ

0 голосов
/ 20 октября 2018

Вот простая (Gatsby) страница, которая использует реагирующий модал в качестве примера.В этом примере я заменил IndexPage по умолчанию на новом начальном сайте Gatsby v2, который вы можете сгенерировать через CLI. 

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

Это должно помочь вам.Лучше всего прочитать о том, как расширить этот пример , используя реактивный модал здесь (или использовать альтернативу).

...