Я пытаюсь создать меню «динамически» в Javascript. Но при необходимости я хочу добавить несколько обработчиков onClick. Например, чтобы открыть второе меню ...
Вот что я делаю:
У меня есть предметы, заявленные следующим образом:
export const mobileMenuItems = [
{
"identifier": "View all categories",
"url": "/all-categories",
"urlText": "View all categories",
"cssClass": "headerLinkArrow",
'clickHandler': 'openAllCategoriesHandler'
},
...desktopMenuItems,
]
А затем я создаю такие ссылки:
mobileMenuItems.map(mobileMenuItem => {
return (
<Menu.Item as={"div"}
key={'mobileMenuItem' + mobileMenuItem.identifier}
className={'p-2'}>
{({active}) => (
<Link href={mobileMenuItem.url}>
<a onClick={mobileMenuItem.clickHandler}
className={_.join([active, mobileMenuItem.cssClass], ' ')}>
{mobileMenuItem.urlText}
</a>
</Link>
)}
</Menu.Item>
)
})
а затем я определяю обработчик в том же файле, где я создаю меню:
const openAllCategoriesHandler = (event) => {
event.preventDefault();
console.log('clicked');
}
Вопрос в том, как заставить обработчик работать? Или это вообще возможно в Javascript?
Привет, сначала удалите тег привязки или тег ссылки. Затем создайте единый обработчик для всех меню и обработайте его в соответствии со значением, переданным в обработчике. Также перенаправить в функцию обработчика
mobileMenuItems.map(mobileMenuItem => {
return (
<Menu.Item as={"div"}
key={'mobileMenuItem' + mobileMenuItem.identifier}
className={'p-2'}>
{({active}) => (
<Link href={mobileMenuItem.url} onClick={() => {
//clickHandler("type")
}}>
<p className={_.join([active, mobileMenuItem.cssClass], ' ')}>
{mobileMenuItem.urlText}
</p>
</Link>
)}
</Menu.Item>
)
})
'clickHandler': openAllCategoriesHandler
, тогда свойство объекта будет использовать фактический обработчик, а не строковое значение? John'clickHandler': 'openAllCategoriesHandler'
почему бы не передать сюда фактическую переменную? Или даже стрелочная функция. Здесь вы передаете только строковое значение. Chin. Udara'clickHandler': 'openAllCategoriesHandler'
mohammad isam