реакция-сортировка-hoc: обработка события click на элементе списка

Question

Этот вопрос есть о https://github.com/clauderic/react-sortable-hoc. Я довольно новый, чтобы реагировать, поэтому я нахожу следующее немного раздражающим. Перейдите по ссылке https://jsfiddle.net/7tb7jkz5/. Линия уведомления 4

const SortableItem = SortableElement(({value}) => <li className="SortableItem" onClick={console.debug(value)}>{value}</li>); 

При запуске кода консоль будет записывать «Item 0» в «Item 99». Щелчок по элементу запишет то же самое, но три раз. Почему это происходит? И действительно ли это необходимо или больше похоже на ошибку?

Я ожидал, что поведение похоже на обычную DOM, поэтому событие щелчка будет пузыриться из щелкнутого элемента и может быть поймана по пути его предков. Наблюдаемое поведение выглядит так, как будто событие click будет отправлено по списку в каждый элемент списка три раза.

Обновление: Ну, это на самом деле так же ясно, как кристалл, спасибо за указание на это, Шубхам. Я не просто указал ссылку, а фактический вызов console.debug, который выполнялся каждый раз, когда выражение оценивалось. Общая ошибка.

Тем не менее, каждый элемент списка отображается (я думаю) три раза, когда я нажимаю один из них. Я подозреваю, что отсутствует оптимизация или даже бесполезное перерисовка.

Answer 1

Необходимо указать действие onClick как function. Используйте () => внутри вызова обработчика. Попробуйте метод ниже, он работает, хотя имеет очень медленный ответ

const SortableItem = SortableElement(({value}) => <li className="SortableItem" onClick={() => console.debug(value)}>{value}</li>);