javascript — обработчик событий React JS onClick

Реагировать на обработчик событий JS onClick

Пожалуйста, прокомментируйте, если вы отрицаете. Это нестандартный (но не столь необычный) шаблон React, в котором не используется JSX, вместо этого все помещается в линию. Кроме того, это Coffeescript.

Реактивный способ сделать это будет с собственным состоянием компонента:

( c = console.log.bind console )

 mock_items: [ { name: 'item_a' uid: shortid() } { name: 'item_b' uid: shortid() } { name: 'item_c' uid: shortid() } ] getInitialState: -{amp}gt; lighted_item: null render: -{amp}gt; div null, ul null, for item, idx in @mock_items uid = item.uid li key: uid onClick: do (idx, uid) ={amp}gt; (e) ={amp}gt; # justf to illustrate these are bound in closure by the do lambda, c idx c uid @setState lighted_item: uid style: cursor: 'pointer' background: do (uid) ={amp}gt; c @state.lighted_item c 'and uid', uid if @state.lighted_item is uid then 'magenta' else 'chartreuse' # background: 'chartreuse' item.name 

Этот пример работает — я проверял это локально. Вы можете проверить этот пример кода точно на моем github . Первоначально env был только локальным для моих собственных исследований и разработок доски, но я разместил его на Github для этого. В какой-то момент он может быть переписан, но вы можете проверить фиксацию от 8 сентября 2016 года, чтобы увидеть это.

В более общем плане, если вы хотите увидеть, как работает этот шаблон CS / no-JSX для React, ознакомьтесь с некоторыми недавними работами здесь . Возможно, у меня будет время полностью реализовать POC для этой идеи приложения, в стек которой входят NodeJS, Primus, Redis и React.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector