Semantic UI React Popup (s)가 나타나지 않습니다.

Question

제목을 참조하십시오.

코드는 문자 그대로

<Popup 
trigger={<li id="close"><a>Close</a></li>} 
content="Click to close" 
basic 
/> 

입니다 그리고 문제의 항목 맴돌고, 또는 클릭하면 그래, 팝업이 표시되지 않습니다. open = {true}로 설정하면 구성 요소에 연결되지 않습니다 (예상대로). 누구든지이 문제를 겪었으며 가능한 해결책을 조언 할 수 있습니까?

Answer 1

CSS 코드가 위치입니다 만들고 있었다 : 상대를하는 Popups가 나타난 위치에 영향을줍니다. 잘못된 위치에 나타났습니다. 불행히도이 코드를 제거하면 우리의 끈적한 바닥 글이 완전히 파괴됩니다.

같은 문제를 경험 한 다른 사람들이 이것을보고 실수를 저지르기를 바랍니다.

Answer 2

방금 ​​코드를 다시 작성했습니다. 그러나 open 속성을 사용하여 팝업을 제어하려면 onMouseOver 함수를 사용하여 팝업 상태를 처리하고 popup opening을 처리해야합니다.

예 : isPopupOpen이라는 상태를 정의하고 기본적으로 false로 설정합니다.

handleMouseOver =() => this.setState({ isPopupOpen: true }) 

handleMouseOut =() => this.setState({ isPopupOpen: false }) 

을 마지막으로 팝업이 방법 쓰기 :

this.state={ 
isPopupOpen : false 
} 

당신은 두 가지 방법으로 상황을 처리 HTML에 적용

   <Popup 
       trigger={ 
        <li 
        id='close' 
        onMouseOver={this.handleMouseOver} 
        onMouseOut={this.handleMouseOut} 
        > 
         <a>Close</a> 
        </li> 
       } 
       content={'click to close'} 
       basic 
       open={this.state.isPopupOpen} 
      />