У меня есть div и кнопка в этом div, которая увеличивает счетчик шагов, а затем удаляется, когда счетчик шагов достигает 2
Когда я щелкаю за пределами div, я хочу, чтобы он не отображался в DOM.
У меня есть функция handleCLickOutside, например, так:
const handleClickOutside = (event) => {
event.preventDefault()
if (
sessionDataRef.current &&
!sessionDataRef.current.contains(event.target) &&
!sessionDataTitleRef.current.contains(event.target)
)
{
closeSessionView();
}
};
Функция closeSessionView передается из родительской функции, но она просто использует useState, чтобы установить состояние показа для div в false.
Моя кнопка условно показана примерно так:
{ sessionDataActiveStep < 2 && <div className="sessionCardNext" onClick={handleNextSessionData}>
<ArrowButton/>
</div>}
И handleNextSessionData просто увеличивает sessionDataActiveStep.
Когда sessionDataActiveStep === 2 это не удается. Удаление ArrowButton из DOM, кажется, заставляет его думать, что щелчок, который увеличивает sessionDataActiveStep до 2, каким-то образом все еще происходит. event.PreventDefault не помогает. Проверка, что sessionDataActiveStep <2 в handleClickOutside (), похоже, ничего не делает. </p>
Есть идеи?