Есть ли способ добавить события ко всем дочерним элементам в ReactJS?

Есть ли способ добавить все события из родительского элемента во все дочерние элементы с помощью ReactJS без жесткого кодирования всех событий?

<div className='myClass' onClick = {handleSelect} onDoubleClick = {handleOpen}>
<span className='child' />
</div>

Как правило, нет, но, в частности, это было бы антипаттерном философии React. React делает элементы частью кода, а не делает код частью DOM.

— 23.03.2022 02:56

javascript reactjs

23.03.2022 02:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обработчики кликов распространяются, поэтому в этом нет необходимости. Прикрепите один обработчик к родителю.

const App = () => {
  const handleSelect = () => console.info('click');
  const handleOpen = () => console.info('double click');
  return (
    <div className='myClass' onClick = {handleSelect} onDoubleClick = {handleOpen}>
      <span className='child'>child</span>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Если вам нужно определить, какой дочерний элемент был нажат, или исключить определенные дочерние элементы из-за запуска обработчика, используйте событие, переданное обработчику, и посмотрите, соответствует ли его цель тому, что вы ищете.

23.03.2022 02:57

Другие вопросы по теме

Отображение вложенных данных с условием: как я могу не отображать данные, цвет товара которых не соответствует условию?

REACT: Как поменять местами элементы в списке дел по их приоритетам

Повторный рендеринг компонента React, хотя все реквизиты не меняются

Неожиданный конец данных в строке 1 столбца 1 данных JSON в экспрессе с React

Авторские права равны нулю, как мне сделать так, чтобы они запускались после полного рендеринга?

Как получить встроенные стили и классы в компоненте

ReactChart2 - Line не является зарегистрированным элементом

Минимальная маржа при попутном ветре

React не может установить div на 100% высоты экрана

React не отвечает на наблюдаемые при входе в систему

Есть ли способ добавить события ко всем дочерним элементам в ReactJS?

Ответы 1

Другие вопросы по теме

Похожие вопросы