Come mostrare/nascondere il componente al clic in React-redux?

Question

Ho un componente:

class CommentBox extends Component { 
    render() { 
     return (
      <div> 
       <p>Some comment</p> 
       <a>Post a reply to this comment</a> 
      </div> 
      <ReplyForm /> 
     ) 
    } 
} 

ho bisogno di questo ReplyForm essere nascosto il caricamento iniziale. Come attivare il suo stato facendo clic su un tag?

Answer 1

È necessario aggiungere un contrassegno allo stato CommentBox. E se il valore di questo flag è false quando non mostrare ReaplyFrom e viceversa. Ecco il codice e l'esempio di lavoro http://codepen.io/anon/pen/KzrzQZ

class ReplyForm extends React.Component { 
    constructor() { 
    super() 
    } 
    render(){ 
    return(
     <div>I'm ReplyForm</div> 
    ) 
    } 
} 

class CommentBox extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     showReply: false 
    } 
    } 
    onClick(e){ 
    e.preventDefault(); 
    this.setState({showReply: !this.state.showReply}) 
    } 
    render() { 
    return (
     <div> 
     <p>Some comment</p> 
     <a onClick={this.onClick.bind(this)} href='#'>Post a reply to this comment</a> 
     {this.state.showReply && < ReplyForm/>} 
     </div> 
    ) 
    } 
} 

Answer 2

Che ne dici di questo?

class CommentBox extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     showForm: false 
    } 
    } 

    render() { 
    const showHide = { 
     'display': this.state.showStatus ? 'block' : 'none' 
    }; 

    const showReplyForm =() => { 
     this.setState({showForm: true}); 
    }; 

    return (
     <div> 
     <div> 
      <p>Some comment</p> 
      <a onClick={showReplyForm}>Post a reply to this comment</a> 
     </div> 
     <div style={showStatus}> 
      <ReplyForm /> 
     </div> 
     </div> 
    ) 
    } 
}