添加外部JS來響應組件

Question

我想添加一個畫布來反應組件。 我已經實現了：

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

var Home = React.createClass({

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

此鏈接包含畫布動畫。

問題：除了鼠標事件之外，一切工作都很好。 如何使它們工作？

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

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

復制這里有反應事件的反應。

Answer 1

React.js正在使用合成事件系統http://facebook.github.io/react/docs/events.html 。 第一步是將事件直接附加到react節點上：

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

然后直接使用事件args中的鼠標位置：

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

我還用空div替換了Hello world，因為它會影響stageHeight變量的大小，並且有時會在拖動時移動球，您應該找出應該更新的剩余部分。 這里是更新的小提琴：

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