@kitas

Как открытие вкладку элемента на сайте который написан на React.js?

import React, { Component } from 'react';
import './Faq.css';

class Faq extends Component {
	state = {
		isOpen : false
	}
	render() {
		return (

					<div className="faq-page">
								<section>

									<div id="open-btn" className={this.state.isOpen ? "isactive" : "ishidden"} onClick = {this.open}>
									   <div className="open-btn">
								              <div className="open-img1"></div>
								              <div className="open-img2"></div>
								             </div>
								         </div>
							     
								
									<div className={this.state.isOpen ? "show-answer" : "hide-answer"}>
				              			<div className="answer-wrapper">
				              				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
				              				 Impedit quaerat aperiam quibusdam suscipit accusantium,
				              				 dolores architecto numquam, ducimus sed. Quod a quia veritatis 
				              				 ipsum alias tempore facilis, sunt rem exercitationem!</p>		              			
					              	  	</div>
								    </div>
							    </section>
								<section>

									<div id="open-btn" className={this.state.isOpen ? "isactive" : "ishidden"} onClick = {this.open}>
									   <div className="open-btn">
								              <div className="open-img1"></div>
								              <div className="open-img2"></div>
								             </div>
								         </div>
							     
								
									<div className={this.state.isOpen ? "show-answer" : "hide-answer"}>
				              			<div className="answer-wrapper">
				              				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
				              				 Impedit quaerat aperiam quibusdam suscipit accusantium,
				              				 dolores architecto numquam, ducimus sed. Quod a quia veritatis 
				              				 ipsum alias tempore facilis, sunt rem exercitationem!</p>		              			
					              	  	</div>
								    </div>
							    </section>
								<section>

									<div id="open-btn" className={this.state.isOpen ? "isactive" : "ishidden"} onClick = {this.open}>
									   <div className="open-btn">
								              <div className="open-img1"></div>
								              <div className="open-img2"></div>
								             </div>
								         </div>
							     
								
									<div className={this.state.isOpen ? "show-answer" : "hide-answer"}>
				              			<div className="answer-wrapper">
				              				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
				              				 Impedit quaerat aperiam quibusdam suscipit accusantium,
				              				 dolores architecto numquam, ducimus sed. Quod a quia veritatis 
				              				 ipsum alias tempore facilis, sunt rem exercitationem!</p>		              			
					              	  	</div>
								    </div>
							    </section>

			</div>
		);
	}
	open = () => this.setState ({
		isOpen : !this.state.isOpen
	})
}

export default Faq;

Имеется вот этот код и нужно, что бы по нажатию на div id="open-btn" открывался именно тот который относится к div id="open-btn". А сейчас по нажатию открываются все сразу. Можно решить костыльно и создать 3 переменные которые будут содержать true false, но это не мой выбор
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Вместо того, чтобы вручную создавать каждый блок, кладите текстовое содержимое блоков в массив, делайте по нему map. Вместо isOpen храните индекс открытого блока (если открыт может быть только один) или добавьте isOpen каждому элементу массива (если одновременно могут быть открыты несколько блоков).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 апр. 2024, в 16:12
2000 руб./за проект
25 апр. 2024, в 16:08
130000 руб./за проект