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

Question

Выполнить функцию из свойств в 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?

# javascript reactjs

Herr Nentu'03 июнь 2021, в 13:11

Источник

0

Вы пытались написать 'clickHandler': openAllCategoriesHandler , тогда свойство объекта будет использовать фактический обработчик, а не строковое значение? John 03 июнь 2021, в 13:16
0

'clickHandler': 'openAllCategoriesHandler' почему бы не передать сюда фактическую переменную? Или даже стрелочная функция. Здесь вы передаете только строковое значение. Chin. Udara 03 июнь 2021, в 13:17
0

передать фактическую функцию, а не имя строки в 'clickHandler': 'openAllCategoriesHandler' mohammad isam 03 июнь 2021, в 13:19

Поделиться в социальных сетях:

Скопировать адрес страницы:

Ответы 1

Смежные вопросы

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

Renu Yadav · Accepted Answer · 2021-06-03T10-24-38.000Z

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

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>
    )
})