Comment montrer / cacher le composant sur clic dans React-redux?

J'ai un composant:

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

J'ai besoin de cette ReplyForm être cachés sur la charge initiale. Comment déclencher l'état en cliquant sur un tag?

source d'informationauteur kuatro | 2016-05-01

  1. 19

    Vous devez ajouter un peu de drapeau de l'état de CommentBox. Et si la valeur de cet indicateur est false quand ne pas afficher ReaplyFrom et vice versa. Heres le code et travail exemple 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>
    )
  }
}
  2. 4

    Comment à ce sujet?

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