Как добавить событие Multiple onclick в react.js
Я столкнулся с одним сценарием, когда кнопка onclick уже использовалась.
но в то же время мне нужно добавить еще одно событие, чтобы добавить history.push(),
Я работал над компонентом боковой панели, используя пользовательский интерфейс материала.
поэтому нужно настроить несколько вещей, которые я добавил код
const menuItems = [
{
text: 'Home',
icon: HomeIcon,
onClick: () => history.push("/"),
},
{
text: 'Log In',
icon: MailIcon,
onClick: () => history.push("/login"),
},
{
text: 'Sign Up',
icon: HomeIcon,
onClick: () => history.push("/signup"),
},
];
...
<List>
{menuItems.map(({ text, icon: Icon, onClick}, index) => (
<ListItem
button
onClick = {
item === menus[2]
? handleSubMenu1Click
: handleSubMenu2Click
}
>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText primary = {text} />
</ListItem>
))}
</List>
Я пробовал что-то вроде этого
const menuItems = [
{
text: 'Home',
icon: HomeIcon,
to: "/",
},
{
text: 'Log In',
icon: MailIcon,
to:"/login",
},
<ListItem element = {Link} to = {item.to} button key = {text}>
Если у нас есть подменю, а также нужно перемещаться по тому, что было бы лучшим подходом
Что-то вроде этого onClick = {() => { item === menus[2] ? handleSubMenu1Click() : handleSubMenu2Click(); //console.info("моя вторая функция") }}
Да, это должно сработать, я думаю.
Но оба будут вызываться одновременно, как он будет различаться между элементами подменю onclick и Router
Вам нужно, чтобы две функции вызывались одновременно, или у вас есть отдельный вариант использования для обработчиков кликов в пунктах подменю? Неясно, в чем именно вы просите помощи, поскольку комментарий @MalwareMoon удовлетворил бы «Как добавить событие Multiple onclick в react.js», и теперь вы задаете другой вопрос.
@DrewReese Да, MalwareMoon прав, подумав, я получил другой вопрос, но я не изменил ни одного вопроса, но также в моем описании внизу говорится, что если у нас есть подменю, а также нужно перемещаться по тому, что было бы лучшим подходом
@DrewReese Как добавить отдельные варианты использования для подменю и ссылки? это комментарий, я не собираюсь менять вопрос
Каковы именно отдельные варианты использования? Пункты меню не являются "ссылками" на другие страницы?
У меня есть маршрутизатор в компоненте приложения, который имеет компонент входа после аутентификации. Я перехожу на домашнюю страницу (с защищенным маршрутом, и в нем есть разрешенные роли) эта боковая панель находится в домашнем компоненте, если вы посмотрите на мои пункты меню, как мне добавить их в роутер? И пункты меню имеют пункты подменю
Да Пункты меню не связаны с другими страницами
Если я просто неправильно понимаю ваш вопрос и пример кода, извините, но какой еще вариант использования или логика вам нужны помимо onClick: () => history.push("/"),, кроме чего-то вроде onClick: () => { /* other logic */; history.push("/"); },?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используйте Event Bubbling, чтобы прикрепить один обработчик onClick к вашему компоненту <List> вместо того, чтобы прикреплять несколько обработчиков к каждому <ListItem>, как описано здесь https://blog.logrocket.com/event-bubbling-capturing-react/.
В вашей функции-обработчике вы получите объект SyntheticEvent, свойство target которого будет содержать ссылку на выбранный элемент, который вы можете использовать, чтобы определить, какие действия предпринять дальше.
Смотрите эту песочницу: https://codesandbox.io/s/snowy-sea-998zvl?file=/src/App.js
Однако из вашего кода я делаю вывод, что вы просто пытаетесь создать меню навигации со ссылками, и для этого вы можете просто использовать компонент react-router-dom<Link>, как показано в этой песочнице: https://codesandbox. io/s/exciting-diffie-putb4f?file=/src/Nav.js
Спасибо за ваше время, это работало хорошо для меня. Я добавил еще один код и ящик, похожий на тот, но я использовал маршрутизатор для этого. Посмотрите, а также, если у вас есть возможность ответить на вопрос, вы можете это сделать. stackoverflow.com/questions/75987812/…
либо разделите его с помощью
;() => {oneFunction(); otherFunction()}, либо оберните эти две функции в функцию где-нибудь еще и используйте эту единственную функцию.