反應組件拖動不起作用，沒有錯誤或控制檯日誌

Question

我試圖修改此SO後Recommended way of making React component/div draggable與es6類一起工作，但沒有任何事件綁定由於某種原因正在觸發，我雖然沒有收到任何錯誤。我的日誌都沒有打印任何東西。

// Dragging implementation https://stackoverflow.com/questions/20926551/recommended-way-of-making-react-component-div-draggable 
export default class Clip extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     pos: this.props.initialPos, 
     dragging: false, 
     rel: null // position relative to the cursor 
    }; 
    } 

    /* we could get away with not having this (and just having the listeners on 
    our div), but then the experience would be possibly be janky. If there's 
    anything w/ a higher z-index that gets in the way, then you're toast, 
    etc.*/ 
    componentDidUpdate(props, state) { 
    if (this.state.dragging && !state.dragging) { 
     document.addEventListener('mousemove', this.onMouseMove); 
     document.addEventListener('mouseup', this.onMouseUp); 
    } else if (!this.state.dragging && state.dragging) { 
     document.removeEventListener('mousemove', this.onMouseMove); 
     document.removeEventListener('mouseup', this.onMouseUp); 
    } 
    } 

    // calculate relative position to the mouse and set dragging=true 
    onMouseDown(e) { 
    console.log('onMouseDown', e); 

    // only left mouse button 
    if (e.button !== 0) return; 
    var pos = $(this.getDOMNode()).offset(); 
    this.setState({ 
     dragging: true, 
     rel: { 
     x: e.pageX - pos.left, 
     y: e.pageY - pos.top 
     } 
    }); 
    e.stopPropagation(); 
    e.preventDefault(); 
    } 

    onMouseUp(e) { 
    console.log('onMouseUp', e); 

    this.setState({ dragging: false }); 
    e.stopPropagation(); 
    e.preventDefault(); 
    } 

    onMouseMove(e) { 
    if (!this.state.dragging) return; 

    console.log('onMouseMove', e); 

    this.setState({ 
     pos: { 
     x: e.pageX - this.state.rel.x, 
     y: e.pageY - this.state.rel.y 
     } 
    }); 
    e.stopPropagation(); 
    e.preventDefault(); 
    } 

    render() { 
    return (
     <div className="clip-component" style={ clipStyle(this.props) }> 

     </div> 
    ); 
    } 
} 

Answer 1

我在渲染的div中缺少onMouseDown={ this.onMouseDown }屬性。