javascript - Reactjs、Rxjs 和鼠标事件

Question

我正在尝试使用各种文章、示例等使用 Rx 和 React 拼凑一个可拖动组件(我第一次尝试使用 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 失败并在 mousedrag.subscribe 行上出现 No Listener Found 错误 during the call to subscribe。 Console.log 告诉我 mouseup、mousemove 和 mousedown 都有未定义的源 - 但我不确定为什么因为 dragTarget 是正确的 - 显然 - 设置为该组件下面的 DOM 元素或至少一个 DOM 元素(参见 here我从中得出的例子)。

现在我不确定问题出在哪里。我倾向于认为 componentDidMount 事件似乎是设置所有 Rx 魔法(!)的合理位置。但我想知道我是不是太早了，我应该在某个地方绑定(bind)到这个，犯了一个愚蠢的错误或者只是没有理清思路。

(所以我也尝试了 this jsfiddle 但它对我也不起作用 - 但出现了不同的错误)

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

小号

Answer 1

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

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

(顺便说一下，您应该在 mouseup 上收听 document 而不是 dragTarget，原因与收听 mousemove 的原因相同)。

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);
    });
},