Установить триггер reactjs -popup

Question

Я пытаюсь выяснить, как изменить триггер в моем всплывающем окне React Modal. Я хотел бы активировать другой элемент на моем сайте. Я хотел бы вызвать элемент по его классу или идентификатору,

Я хочу изменить триггер = {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;

Затем я вставляю его на свой сайт в индексе. js (Работа с Гэтсби 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

Внутри индекса. js - это место, где я хочу вызвать модальное поле с другим элементом с указанным c классом.

Я новичок в React, поэтому я надеюсь, кто-то может помочь

Answer 1

Вы можете использовать свойство open reactjs -popup и сделать ваш компонент управляемым . Это означает, что 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>
    )
  }
}