我试图弄清楚如何更改我的 React Modal 弹出窗口上的触发器。我想在我的网站上触发不同的元素。我想通过其类或 ID 触发一个元素,
我想为具有类集的不同元素更改 trigger={ Open Modal }。
有可能吗?
我有以下用于模态的 React 组件:
import React from "react";
import Popup from "reactjs-popup";
import projectStyles from '../styles/project.module.scss'
class PopupVideo extends React.Component {
render() {
return(
<Popup trigger={<button className="button"> Open Modal </button>} modal>
{close => (
<div className={projectStyles.modal}>
<a className={projectStyles.close} onClick={close}>
×
</a>
<div className={projectStyles.header}> Modal Title </div>
<div className={projectStyles.content}>
{" "}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
</div>
<div className={projectStyles.actions}>
<button
className="button"
onClick={() => {
console.log("modal closed ");
close();
}}>
CERRAR
</button>
</div>
</div>
)}
</Popup>
)
}
}
export default PopupVideo;
然后我将它粘贴到我的网站 index.js 中(使用 Gatsby JS):
import PopupVideo from "../components/popup"
const IndexPage = () => {
const data = useStaticQuery(graphql`
query{
site{
siteMetadata{
title
description
siteUrl
}
}
`)
return(
<Layout>
<PopupVideo />
</Layout>
)
}
export default IndexPage
在 index.js 中是我想用具有特定类的不同元素触发模式的地方。
我是 React 的初学者,所以希望有人能提供帮助
最佳答案
您可以使用 open
reactjs-popup 的属性并使您的component controlled .这意味着 useState 将是您弹出状态的唯一真实来源。
// index.js
import React from 'react'
import PopupVideo from "../components/popup"
const IndexPage = () => {
const [open, setOpen] = React.useState(false)
return(
<Layout>
<button onClick={() => setOpen(true)}>open</button>
<PopupVideo setOpen={setOpen} open={open} />
</Layout>
)
}
// popup.js
import React from "react";
import Popup from "reactjs-popup";
import projectStyles from '../styles/project.module.scss'
class PopupVideo extends React.Component {
render() {
return(
<Popup open={this.props.open} modal>
{() => (
<>
// ...
<button onClick={() => this.props.setOpen(false)}>
close
</button>
</>
)}
</Popup>
)
}
}
关于javascript - 设置触发 reactjs-popup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61598306/