在反应中打开一个弹出窗口答案

【问题标题】：Open a popUp in react在反应中打开一个弹出窗口
【发布时间】：2021-07-02 14:56:35
【问题描述】：

我想在点击反应按钮时打开一个弹出窗口，我有这个但弹出窗口不会出现：

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target={`#${props.idMessage}`}>
                {props.idMessage}
            </button>


            <div class="modal fade" id={props.idMessage} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

使用 react 调试工具，我可以看到 props.id 明显不同，并且我的 data-target 上的值与我的 id 相同，你可以看到弹出窗口应该出现：

【问题讨论】：

你好，我不知道你使用的是哪个库，但是那里有很多更容易使用的 react ui 库，而不是使用属性，我们应该使用 props 和 state，毕竟我们在 jsx 范围而不是 html 中，使得这样的逻辑更容易实现。试试这个：react-md.mlaursen.com/components/dialogs

标签： javascript reactjs bootstrap-4

【解决方案1】：

这是使用 React Hooks 实现此目的的现代方法

import React, { useState } from "react";

const PopUp = ({ idMessage }) => {
  // create state `open` with default as false
  const [open, setOpen] = useState(false);
  return (
    <>
      {/* click of button toggles `open` value therefore visibility */}
      <button
        onClick={() => setOpen(!open)}
        type="button"
        className="btn btn-primary"
        data-toggle="modal"
        data-target={`#${idMessage}`}
      >
        {idMessage}
      </button>
      {/* If open is true show your <div /> */}
      {open && (
        <div
          className="modal fade"
          id={idMessage}
          tabIndex="-1"
          role="dialog"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          content
        </div>
      )}
    </>
  );
};

export default PopUp;

【讨论】：

我是个新手，所以也许这是一个愚蠢的问题。我已将此代码复制到一个文件中，并从另一个渲染组件的返回中调用它。在这种情况下，元素只是在同一个组件中呈现，而不是打开到弹出窗口中。你能帮我解决这个问题吗？谢谢
嘿，这只是打开/关闭功能的一个例子，要让它看起来像一个弹出窗口，你的 div 必须设置样式。因此，在这种情况下，“模态淡入淡出”类具有将 div 居中到页面和淡入淡出动画的样式。
这正是我的做法。但是，我注意到有时它会在单击整个屏幕或快速单击按钮时“中断”。不知道为什么会这样。

【解决方案2】：

您可以考虑将弹出窗口创建为可重用的组件，它只呈现props.message。假设您在 App.js 中有按钮，下面是如何在其上添加点击侦听器的方法。

class App extends Component {
  state = {showPopup: false};

  openPopupHandler = () => {
    this.setState({showPopup: true});
  }
  
  closePopupHandler = () => {
    this.setState({showPopup: false});
  }

  
  render() {
    let popup = null;
    if(this.state.showPopup) {
      popup = (<Popup message='the text you need to display' closeMe={this.closePopupHandler}/>);
    } 
    return(
      <div>
      <button onClick={this.clicked}>Click me </button>
      {popup}
      </div>
    );
  }
}

您可以定义如下所示的弹出组件。

Popup.js

const popup = (props) => {
return (
  <div>
    <p>{props.message}</p>
    <button onClick={props.closeMe}>Close Popup</button>
  </div>
);
}

此外，根据您的要求设置弹出组件的样式，并且 z-index 大于父组件的 z-index。

【讨论】：

【解决方案3】：

这个怎么样：

class PopUp extends Component {
 constructor(props) {
    super(props);
    this.state = {
        hide: false
    };
 }
 clicked(){
     this.setState({
       hide: true
     });
 }
 render() {
     return (
        <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" onClick={() => this.clicked()} >
            Click Me
        </button>
        {
          this.state.hide? 
              <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">Required PopUp </div>
              : null
        }
        </div>
     );
  }
}

您可以在代码中将其用作<PopUp>

【讨论】：