如何從react.js元素

我使用這個簡單的渲染功能與事件處理程序刪除特定的事件監聽器：如何從react.js元素

render:function(){ 
     return (
      <div id="all-highlights" class="highlight-container" onMouseDown={this.drag} onMouseUp={this.dragEnd} onMouseMove={this.moving}> 
       <div class="highlight"> 

       </div> 
      </div> 
     ); 
    }

內React.createClass功能，使用類似：this.removeTheListener功能，我將如何刪除特定的mouseMove功能？不管mouseMove函數的性能如何，我知道它的資源很重，但是我正在做它完美的事件。

是否可以只刪除特定的偵聽器，然後一旦刪除將其添加回不同的時間點？

來源

2013-10-14 asherrard

在React中，如果您想更改某些內容（屬性，偵聽器等），則應該通過更新狀態強制組件重新呈現。然後你根據該狀態進行渲染。

下面是一段代碼，應爲你工作：

var DraggableComponent = React.createClass({ 

    getInitialState: function() { 
    return { 
    dragging: false 
    }; 
    }, 

    render: function(){ 
    var onDrag = this.state.dragging ? this.onDrag : null; 
    return (
     <div 
     className="highlight-container" 
     onMouseDown={this.dragStart} 
     onMouseUp={this.dragEnd} 
     onMouseMove={onDrag}> 
     <div className="highlight"> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    }, 

    dragStart: function() { 
    this.setState({dragging: true}); 
    }, 

    dragEnd: function() { 
    this.setState({dragging: false}); 
    }, 

    onDrag: function() { 
    // ... 
    } 

});

來源

2013-10-17 06:29:12

你貼什麼是相當多我怎麼設置我的了，我身邊換本的零和this.moving功能。這就是訣竅。這兩個都是很好的答案，但是你增加了我感覺更多的上下文 – asherrard

與React中的所有內容一樣，關鍵在於以聲明方式思考。最簡單的方法是存儲與您是否希望附加事件相對應的某個狀態。（您可能已經有了這樣一個標誌！）然後，你可以這樣做：

onMouseMove={this.state.dragging ? null : this.moving}

，然後簡單地寫

this.setState({dragging: true});

在你的鼠標按下處理

。

來源

2013-10-14 22:38:34

如何從react.js元素

回答

相關問題