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正在使用syntethic事件系统http://facebook.github.io/react/docs/events.html。第一步是直接在react节点上附加事件：

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

然后直接使用event args中的鼠标位置：

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

我还用空div替换了Hello world，因为它影响了stageHeight变量的大小，并设法有时拖动滚动球，你应该找出应该更新的剩余部分。这里有更新的小提琴：

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

添加外部JS以响应组件

1 个答案: