javascript - 设置触发 reactjs-popup

Question

我试图弄清楚如何更改我的 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}>
                &times;
                </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 的初学者，所以希望有人能提供帮助

Answer 1

您可以使用 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>
    )
  }
}