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

Question

[psyhO_octopus]

Я делаю компонент календаря, специфичный для нашего проекта. В этом календаре выводятся даты на год вперед, т.е. 365 дней. При клике на любую из дат мне нужно получить эту дату. И вопрос в том как это сделать.
Очевидно, что вешать обработчик на каждый элемент на есть хорошо, а хорошо повесить его только на календарь. Но как потом получать даты, не ясно.

Answer 1

[Алексей Зуев]

Запихнуть даты в data-атрибут.

Comments

[psyhO_octopus]

Как вариант, но я не очень люблю хранить данные в HTML.

Answer 2

[Денис Инешин]

Делается через делегирование событий, вот пример: jsfiddle.net/L29me761

$('.calendar').on('click', '.day', function () {
    var day = $(this).data('date');
    console.log(day);
});

Comments

[psyhO_octopus]

По-моему это совсем не React way

[Денис Инешин]

psyhO_octopus: почему же, как раз React way. У реакта все события навешаны на document и делегирование уже встроенное под капотом.

[Денис Инешин]

psyhO_octopus: https://facebook.github.io/react/docs/interactivit... вот посмотрите. Вы делаете onClick={this.handleClick}, но это лишь реактовская магия, на самом деле под капотом работает делегирование событий

[psyhO_octopus]

Ну дело в том, что мне надо как то отличать клик по одному дню на клик по другому. Я посмотрел как делаю другие люди и делают он как-то так:
onClick={this._handleDayClick.bind(this, someDayObject)}

[Денис Инешин]

psyhO_octopus: ну как угодно, по сути не имеет значения, как вы прочитаете day из data-атриубута или из первого аргумента в функции _handleDayClick.

[psyhO_octopus]

Денис Инешин: я думаю ни как угодно, ибо bind возвращает новую функцию, т.е. какя понимаю будут созданы 365 новых анонимных функций

[Денис Инешин]

psyhO_octopus: анонимные функции это не тоже самое что 365 слушателей. Их уничтожит сборщик мусора.

[psyhO_octopus]

Денис Инешин: ну и славно, спасибо

Answer 3

[Андрей Антропов]

Реакт вешает на события только в самом документе, потом они диспатчатся по виртуальному дому, то есть обработчик и так будет один и можно создать компонент для этих дат и саму дату передавать через props

Comments

[psyhO_octopus]

Т.е. если на каждый элемент повешу onClick то это нормально? Например, если календарь то показывается (рендерится), то удаляется проблем с памятью у меня не будет?

[Андрей Антропов]

psyhO_octopus: Если пойти по пути реакта то не будет, не создавать 365 прибинженых функций, а сделать компонент в котором будет один обработчик повешан на клик по нему
handleClick(e) { this.props.action(this.props.day) }

[psyhO_octopus]

Андрей Антропов: что за props.day? В этом и проблема что мне надо в обработчик кинуть инфу о конкретном днем

[Андрей Антропов]

хабрапарсер съел < Day day={dayForRender} action={this.selectDay} / >

[psyhO_octopus]

Это мне нравится, спасибо.