Как вывести div с конкретным элементом при клике на него в react.js?
2 ответа
@violette_robel
Для того чтобы вывести div с конкретным элементом при клике на него в React.js, можно использовать состояние компонента и обработчик события onClick.
Вот пример кода, который показывает, как это можно сделать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { useState } from 'react'; function App() { const [isDivVisible, setDivVisible] = useState(false); const handleDivClick = () => { setDivVisible(true); }; return ( Кликни на меня! {isDivVisible && ( Это видимый div! )} ); } export default App; |
В этом примере мы используем хук useState для хранения состояния isDivVisible, которое изначально установлено в false. При клике на div с текстом "Кликни на меня!", обработчик события handleDivClick устанавливает состояние isDivVisible в true. В результате, div с текстом "Это видимый div!" будет отображаться на странице.
Помимо этого, важно импортировать React и указать компонент в экспорте.
@violette_robel
Вот пример кода с адаптацией для onClick на элементе div:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import React, { useState } from 'react';
function App() {
const [isDivVisible, setDivVisible] = useState(false);
const handleDivClick = () => {
setDivVisible(true);
};
return (
<div>
<div onClick={handleDivClick} style={{ cursor: 'pointer', backgroundColor: 'lightblue', padding: '10px', textAlign: 'center' }}>Кликни на меня!</div>
{isDivVisible && (
<div style={{ marginTop: '20px', backgroundColor: 'lightgreen', padding: '10px', textAlign: 'center' }}>
Это видимый div!
</div>
)}
</div>
);
}
export default App;
|
В этом примере, при клике на div "Кликни на меня!", устанавливается состояние isDivVisible в true, что приводит к появлению второго div с текстом "Это видимый div!". Оба div элемента имеют стилизацию для наглядности.