Question

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

CustomerID

Answer 1

不幸的是，到目前为止，这在语义UI反应中尚未解决：https://github.com/Semantic-Org/Semantic-UI-React/issues/3006

您可以使用悬停代替单击并添加可悬停道具。

Answer 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>
      );
    }
  };

单击另一个弹出窗口时，React Semantic UI隐藏弹出窗口

2 个答案: