我正在一个有关使用Gatsby v2(Reactjs)进行捐赠的网站,我需要一个示例,例如使用Gatsby或ReactJS在按钮捐赠点击上打开模式窗口。我在互联网上搜索,却一无所获。
谢谢。
答案 0 :(得分:2)
这是一个简单的(Gatsby)页面,以react-modal为例。在此示例中,我替换了Gatsby v2新的入门站点中的默认IndexPage,您可以通过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
那应该带你走。最好继续阅读如何扩展此示例using react-modal here(或使用替代方法)。
答案 1 :(得分:0)
首先,上面的示例将不起作用,因为 #main 不存在,目前Gatsby应用的ID为 ___ gatsby ,因此它看起来像这样
ReactModal.setAppElement('#___gatsby')
但是希望以后这个ID不会改变是不好的。因此,最好实现自己的React模态组件,这是一个很好的示例https://www.digitalocean.com/community/tutorials/react-modal-component