React Semantic UI скрывает всплывающее окно, нажимая на другое всплывающее окно

Question

Я использую реагирующий семантический интерфейс в моем приложении.Я использую семантическое всплывающее окно, чтобы показать всплывающую подсказку.Проблема: - При нажатии на всплывающую кнопку предыдущие открытые всплывающие окна не закрываются автоматически.

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

Answer 1

Вот как мы можем достичь этого: -

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

Answer 2

К сожалению, это пока не решено в semantic-ui-реагировать, как вы можете видеть здесь: https://github.com/Semantic-Org/Semantic-UI-React/issues/3006

Вы можете использовать hover вместо click и добавить hoverable prop.