Выполнить функцию из свойств в Javascript

Я пытаюсь создать меню «динамически» в 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?

Источник
  • 0
    Вы пытались написать 'clickHandler': openAllCategoriesHandler , тогда свойство объекта будет использовать фактический обработчик, а не строковое значение?
  • 0
    'clickHandler': 'openAllCategoriesHandler' почему бы не передать сюда фактическую переменную? Или даже стрелочная функция. Здесь вы передаете только строковое значение.
  • 0
    передать фактическую функцию, а не имя строки в 'clickHandler': 'openAllCategoriesHandler'
Codelisting
за 1 против
Лучший ответ

Привет, сначала удалите тег привязки или тег ссылки. Затем создайте единый обработчик для всех меню и обработайте его в соответствии со значением, переданным в обработчике. Также перенаправить в функцию обработчика

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>
    )
})
Codelisting
Популярные категории
На заметку программисту