Добавить внешний JS для взаимодействия компонента

Question

Я хочу добавить холст для взаимодействия компонента. Что я достиг:

var React = require('react'), 
    c = require('./../canvas_animation'); 

var Home = React.createClass({ 

componentDidMount: function() { 
    React.findDOMNode(this).childNodes[1].appendChild(c); 
    }, 

Это link содержит холст анимации.

Проблема: все работает нормально, реагируя отдельно от событий мыши? Как я могу заставить их работать?

jQuery(document).ready(function() 
      { 
       $(document).mousedown(function(e) 
       { 
        onMouseDown(); 
       }); 

       $(document).mouseup(function(e) 
       { 
        onMouseUp(); 
       }); 
      }) 

Replicated здесь реагируют на возникновение событий.

Answer 1

React.js использует систему синтетических событий http://facebook.github.io/react/docs/events.html. Первый шаг должен были бы приложить события на реакцию узла непосредственно:

render: function() { 
    return <div onMouseDown={onMouseDown} onMouseUp={onMouseUp}></div>; 
} 

затем использовать позицию мыши из аргументов событий непосредственно:

function onMouseDown(e) 
    { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    ... 
    } 

Я также замененный Привет мира с пустым DIV, потому что это влияет на размере stageHeight и сумел иногда перемещать шары на перетаскивание, вы должны выяснить, какие оставшиеся части нужно обновить. Вот обновленная скрипка:

https://jsfiddle.net/69z2wepo/12491/