Как показать/скрыть компонент при нажатии в React-redux?

У меня есть компонент:

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

Мне нужна эта функция, чтобы быть скрытой при начальной загрузке. Как вызвать его состояние, нажав на тег?

Ответы

Ответ 1

Вы должны добавить некоторый флаг в состояние CommentBox. И если значение этого флага false, когда не отображается ReaplyFrom и наоборот. Вот код и рабочий пример 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

Как насчет этого?

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