Развернуть и свернуть Div в React
Песочница, показанная ниже, показывает два расширяющихся и сворачивающихся элемента div, которые я просто тестирую в качестве шаблона. Каждый из них будет переключать разворачивание/свертывание div, скрытого с правой стороны.
То, что я пытаюсь сделать, это сделать так, чтобы при нажатии, чтобы развернуть один div, другой рухнул. Как было бы проще всего добавить эту функциональность?
Был бы очень признателен за любые советы по логике или решение, чтобы заставить его работать. Я думаю, возможно, установить функцию handleClick, которая говорит, что когда div «x» является активным div, закройте все остальные, но я не совсем уверен в логике или решении здесь. Был бы признателен за любую помощь.
codeandbox: https://codesandbox.io/s/wandering-cherry-pk7xw?file=/src/NavButton.js
Спасибо.
Ответы 1
Переключение меню по щелчку и одновременное закрытие другого.
<div className = "iconBox">
<div
className = "navIcon"
onClick = {() => {
setToggle(!toggle);
setToggle1(false);
}}
></div>
</div>
...
<div className = "iconBox2">
<div
className = "navIcon"
onClick = {() => {
setToggle1(!toggle1);
setToggle(false);
}}
></div>
</div>
codeandbox : https://codesandbox.io/s/flamboyant-banzai-58snd
@GoreSometimes У вас может быть одно состояние для всех div, чтобы использовать только одно setState.
Если вы не возражаете против моего вопроса, не могли бы вы показать мне пример этого или указать мне правильное направление, где я могу это сделать? Я полагаю, что это будет с useContext, но пока я только изучил основы реагирования. Ценю всю вашу помощь. Спасибо.
@GoreSometimes Вам не нужен useContext. Использование массива или объекта было бы хорошо. codeandbox.io/s/fancy-fast-nzez8
Спасибо за вашу помощь в этом. Я ценю это. Мой последний вопрос: я планирую иметь четыре переключаемых элемента div. Есть ли более простой способ настроить функциональность, чтобы мне не приходилось писать четыре набора setToggle(false) для каждого div?