CSS 가시성을 버튼 클릭시 표시로 설정 - Reactjs

reactjs.을 사용하여 버튼 클릭 이벤트에서 특정 div를 표시하도록 설정하려고합니다. CSS 전용 솔루션이 있습니까? 아니면 reactjs을 사용하여 처리해야합니까? 그렇다면 내가 취해야 할 접근법은 무엇인가? CSS 가시성을 버튼 클릭시 표시로 설정 - Reactjs

이

내가

<div className="post_preview" id="postpreview"> 

</div>

CSS이 post_preview의 DIV에 사용되는 미리보기 버튼을 클릭하면 내 버튼을 나는 다음과 같은 DIV 볼 수 있도록 할

<div className="post_publish"> 
    <button className="preview_btn" href="#postpreview" onClick={this.preview}>Preview</button> 
    <button className="post_btn">Post</button> 
    <button className="cancel_btn" onClick={this.props.hideOverlay}>Cancel</button> 
</div>

을 배치하는 사업부입니다

.post_preview { 
    width: 100%; 
    height: 60%; 
    position: fixed; 
    visibility: hidden; 
    margin-top: 100px; 
}

출처

2017-02-28 CraZyDroiD

아마도 도움이 될 것입니다. http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css – Noel

javascript/react를 사용해야합니다.

변경이에 사업부 : :이의 상태를 사용해야합니다 기능

function preview() 
{ 
    this.setState({visibility: 'visible'}) 
} 

function hide_preview() 
{ 
    this.setState({visibility: 'hidden'}) 
}

를 들어

<div className="post_preview" id="postpreview" style={{visibility: this.state.visibility }}> 

</div>

(나는 당신을 믿고있어 한 가지 방법은 다음과 같이 그것을 할 것입니다 이것이 어떻게 작동하는지). preview 및 hide_preview은 미리보고 숨길 단추에 연결됩니다.

출처

2017-02-28 05:36:32

내 post_preview div의 CSS가 어떻게 바뀌나요? 내 버튼은 별도의 div에 있습니다. – CraZyDroiD

인라인 스타일이 CSS보다 우선합니다. 별도의 div 안에있는 버튼은 중요하지 않아야합니다. 동일한 구성 요소 안에 모든 요소가 포함되어 있으면 중요하지 않습니다. –

감사 솔루션이 작동했습니다. – CraZyDroiD

CSS 가시성을 버튼 클릭시 표시로 설정 - Reactjs

답변

관련 문제