Javascript Reactjs、Rxjs和鼠标事件

我正在尝试使用Rx组装一个可拖动组件，并使用各种文章、示例等进行反应。我第一次尝试使用Rxjs。到目前为止，我的代码是

var Draggable = React.createClass({   

  getInitialState: function () {
    return {
      x: 0, 
      y: 0
    }
  },

  componentDidMount: function () { 
    var dragTarget = $(this.getDOMNode())
    this.mouseup = Rx.Observable.fromEvent(dragTarget, 'mouseup')
    this.mousemove = Rx.Observable.fromEvent(document, 'mousemove')
    this.mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown')

    this.mousedrag = this.mousedown.flatMap(function(md){          
      var startX = md.offsetX
      var startY = md.offsetY
      return this.mousemove.map(function(mm) {
        mm.preventDefault()
        return {
            x: mm.clientX - startX,
            y: mm.clientY - startY
        }
    }).takeUntil(this.mouseup)
  })

  console.log(dragTarget)
  console.log(this.mouseup)
  console.log(this.mousemove)
  console.log(this.mousedown)
  console.log(this.mousedrag)

  this.subscription = this.mousedrag.subscribe(function(pos){   <= Error here - No Listener Found 
    console.log(pos)
    this.setState({
        x: pos.x,
        y: pos.y
    })
    this.props.onDrag(pos)
  })    
},

  render: function () {
    console.log("render:"+ this.state.x)
    console.log("render:"+ this.state.y)
    // transferPropsTo will merge style & other props passed into our
    // component to also be on the child DIV.
    return this.transferPropsTo(React.DOM.div({      
      style: {
        position: 'absolute',
        left: this.state.x + 'px',
        top: this.state.y + 'px'
      }
    }, this.props.children))
  }
})

现在我不确定我是否正确地设计了这个。我发现Rx失败，在调用subscribe的过程中，mousedrag.subscribe行上出现了“未找到侦听器”错误。Console.log告诉我mouseup、mousemove和mousedown都有未定义的源代码，但我不确定为什么，因为dragTarget显然正确地设置为该组件的DOM元素，或者至少是一个DOM元素，请参见我所绘制的示例

现在我不确定问题出在哪里。我倾向于认为componentDidMount事件似乎是设置所有Rx魔术的合理场所！。但是我想知道我是否太早了，我应该在某个地方把它绑定在一起，犯一个愚蠢的错误，或者只是没有正确地思考

所以我也试过了，但对我来说也不起作用——但有一个不同的错误

如有任何建议/更正，将不胜感激

---

S

我没有使用过ReactJS，因此这可能不是完整的答案。但最明显的问题是你有一个上下文问题。在您用于Rx操作的本地函数中，这不会设置为您的可拖动对象，实际上，您的所有属性都将丢失。您需要将其捕获为闭包中的变量，以便访问它。请参见下面的自变量：

如果这不能解决您的问题，那么请详细说明您的错误。你什么时候拿到的？在呼叫订阅期间？或者仅当您向元素发出mousedown命令时

顺便说一句，您应该在文档上向mouseup而不是dragTarget列表，原因与您为mousemove列表相同

---

你的提琴上的rx链接是错误的-它们给出了404。@ColinRamsay对你有用吗？这个有用：@Brandon非常有用thx Sthx。我已经在操作中添加了一些关于错误的细节。使用self似乎没有什么不同。不幸的是，再也找不到监听器了。您使用的是什么版本的RxJs？在旧版本中，fromEvent不支持jQuery对象。只要保持为假，新版本就可以。如果您使用的是旧版本的RxJs，请尝试在dragTarget[0]上调用fromEvent以传入本机DOM元素。2.3.22-但是需要rx jquery（我以前没有使用过），然后使用组合JSFIDLE和答案将我排序。明亮的我没有足够的代表投票支持你的答案！是的，我一直使用RXjQuery，但还没有真正使用fromEvent。很高兴你让它工作了。

componentDidMount: function () { 
    var dragTarget = $(this.getDOMNode());
    var self = this;
    self.mouseup = Rx.Observable.fromEvent(document, 'mouseup');
    self.mousemove = Rx.Observable.fromEvent(document, 'mousemove');
    self.mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');

    self.mousedrag = self.mousedown
        .flatMap(function(md){          
            var startX = md.offsetX;
            var startY = md.offsetY;
            return self.mousemove
                .map(function(mm) {
                    mm.preventDefault();
                    return {
                        x: mm.clientX - startX,
                        y: mm.clientY - startY
                    };
                })
                .takeUntil(self.mouseup);
        });

    console.log(dragTarget);
    console.log(self.mouseup);
    console.log(self.mousemove);
    console.log(self.mousedown);
    console.log(self.mousedrag);

    self.subscription = self.mousedrag.subscribe(function(pos) {
        console.log(pos)
        self.setState({
            x: pos.x,
            y: pos.y
        });
        self.props.onDrag(pos);
    });
},