在单击另一个弹出窗口时反应语义 UI 隐藏弹出窗口答案

【问题标题】：React Semantic UI hide popup while click on another popup在单击另一个弹出窗口时反应语义 UI 隐藏弹出窗口
【发布时间】：2018-10-03 20:55:13
【问题描述】：

我在我的应用程序中使用反应语义 ui。我正在使用语义弹出窗口来显示工具提示。面临的问题：- 当我点击弹出按钮之前打开的弹出窗口不会自动关闭。

const PopupExample = () => (
  <div>
    <Popup
      trigger={<Button icon>Click me</Button>}
      content='Content 1'
      on='click'
    />
    <Popup
      trigger={<Button icon>click me1</Button>}
      content='Content 2'
      on='click'
    />
  </div>
)

export default PopupExample

【问题讨论】：

标签： javascript reactjs semantic-ui-react

【解决方案1】：

不幸的是，到目前为止，这在语义-ui-react 中尚未解决，您可以在此处看到：https://github.com/Semantic-Org/Semantic-UI-React/issues/3006

您可以使用 hover 而不是 click 并添加 hoverable 道具。

【讨论】：

查看我的答案如何实现。

【解决方案2】：

这就是我们实现这一目标的方法：-

class PopUpContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      popupStatus: {
        popup1: false,
        popup2: false
      }
    };
  }

  handleOpen = (keyValue) => {
    let status = {
      popup1: false,
      popup2: false
    }
    status[keyValue] = true;
    this.setState({ popupStatus: status });
  }

  handleClose = () => {
    let status = {
      popup1: false,
      popup2: false
    }
    this.setState({ popupStatus: status });
  }

  render() {

    return (
      <div className = "button-container" >
          <Popup
          trigger={<button>Click me1</button>}
          content={data.message}
          position='bottom left'
          on='click'
          open={isOpen}
          onOpen={() => handleOpen("popup1")}
          onClose={handleClose}/>

          <Popup
          trigger={<button>Click me2</button>}
          content={data.message}
          position='bottom left'
          on='click'
          open={isOpen}
          onOpen={() => handleOpen("popup2")}
          onClose={handleClose}/>
      </div>
      );
    }
  };

【讨论】：