Блог

Главная - Вопросы по программированию - Открыть / закрыть дочерний компонент в ReactJS

Открыть / закрыть дочерний компонент в ReactJS

#reactjs

#reactjs

Вопрос:

Я хочу создать кнопку просмотра сведений в моем приложении react, которая открывает дочерний компонент «card» и имеет кнопку закрытия

                 <div id="Card1" className='card d-none' >
                    <span className="close" onClick={this.CloseClick} >amp;times;</span>
                    <p>Some text in the Modal..</p>
                </div>

Комментарии:

1. вы хотите создать модальный компонент? Не могли бы вы отправить больше кода вашего приложения?

2. В чем ваша проблема? Это единственный код, который у вас есть? Непонятно, где вы застряли.

Ответ №1:

Вам нужно использовать условный рендеринг. Попробуйте что-то вроде следующего:

 class Card extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     showCard: false,
   };
   this.toggleCard = this.toggleCard.bind(this);
  }
  toggleCard(){
    const show = this.state.showCard
    this.setState({showCard: !show});
  }
  render() {
    return (
      <div>
        <button onClick={this.toggleCard}>Toggle card</button>
       {this.state.showCard amp;amp;
         <div id="Card1" className='card d-none' >
                  <span className="close" onClick={this.CloseClick} >amp;times;</span>
                  <p>Some text in the Modal..</p>
         </div> 
       }
      </div>
     );
   }
}

Конечно, код не идеален, вам нужно будет отредактировать его в соответствии с вашими потребностями. Кроме того, ваша кнопка закрытия будет реализовывать нечто похожее на мой toggleCard метод.