Допустим, существует массив элементов в количестве двух штук.
Splide отображает три элемента. На каждом элементе кнопка с действием.
Если нажать на кнопку третьего элемента - не будет вызван метод клика.
Если прокрутить на один элемент вправо - нельзя будет услышать нажатие по кнопке уже двух последних элементов.
Если еще раз прокрутить на один элемент - тогда первых два элемента имеют кликабельную кнопку, а третий нет.
Что получается - если не прокрутить слайдер до начального уровня, тогда кнопки следующих элементов почему-то нельзя нажимать. Обработчик нажатия кнопки "dealFormHandler", кнопка "Нажми на меня".
Что сделать, чтобы независимо от прокрутки слайдера все кнопки элементов прослушивались?
const dealFormHandler = (event) => {
setIsDealForm(true);
setItemID(event.target.id);
setItemType(event.target.name);
console.log(event.target);
}
return (
<Splide options={{
type: 'loop',
perPage: 3,
perMove: 1,
pagination: false,
autoplay: true,
interval: 3000,
}} aria-label="My Favorite Images">
{items.map((item, index) => {
return (
<SplideSlide key={index} className={cn.container__cards_card}>
<div className={cn.cards_card_image}>
<button id={item.id} name={item.type} onClick={dealFormHandler}>
НАЖМИ НА МЕНЯ
</button>
</div>
<div className={cn.cards_card_title}>
{item.name}
</div>
</SplideSlide>
);
})}
</Splide>
</div>
{
isDealForm &&
<DealForm modal={modal} setIsDealForm={setIsDealForm}
route={router.asPath} subcategoryName={subcategoryName} itemID={itemID} type={itemType} />
}
);
Простой
