反應剝離出來的onclick

我有以下陣營組成：反應剝離出來的onclick

class PlayerRow extends Component { 
    activateKey(){ 
     $(this).addClass('active') 
} 
render() { 

    return (
       <div className="row-par"> 
        <div className="details-cont"> 
        </div> 
        <div className="key-cont"> 
         <div onClick={this.activateKey} className="key"></div> 
         <div onClick={this.activateKey} className="key"></div> 
         <div onClick={this.activateKey} className="key"></div> 
        </div> 
       </div> 
     ) 

} 
}

我想在嵌套的div上的點擊執行功能activateKey但每當我呈現出來的應用我的onclick屬性被剝離的所有divs。爲什麼會這樣？

來源

2017-02-09 red house 87

在onclick屬性應該在DOM中沒有任何理由。檢查時動態附着的聽衆不一定可見。點擊處理程序的工作？代碼是否正在運行？嘗試點擊其中一個div。請注意'activateKey'可能需要'.bind（this）'。 React和jQuery的結合也不是我的建議 – slezica

爲什麼你不鼓勵在React上使用jQuery？此外爲什麼反應剝離onclick，它不會從正常的HTML剝離？ –

React接管DOM的處理。如果你觸摸DOM，你可能會與React競爭，而React將會獲勝。它會隨心所欲地去除，添加和修改DOM元素，可能會覆蓋您的更改。如果你打算使用React，最安全的方法是學習讓jQuery去。這個例子（'onclick'屬性「dissappearing」）只是其中許多方法中的一種，React將DOM抽象出去 – slezica

React綁定事件偵聽器本身，所以onClick不會直接導致DOM中的onclick屬性。但是，您的代碼實際上工作（請參閱代碼段）。

class PlayerRow extends React.Component { 
 
    activateKey() { 
 
     console.log('ddd') 
 
} 
 
render() { 
 

 
    return (
 
       <div className="row-par"> 
 
        <div className="details-cont"> 
 
        </div> 
 
        <div className="key-cont"> 
 
         <div onClick={this.activateKey} className="key">asd</div> 
 
         <div onClick={this.activateKey} className="key">qwe</div> 
 
         <div onClick={this.activateKey} className="key">zxc</div> 
 
        </div> 
 
       </div> 
 
     ) 
 

 
} 
 
} 
 

 
ReactDOM.render(
 
    <PlayerRow/>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

我建議兩件事雖然，使用.bind(this)採取行動處理程序，甚至更好，使用箭頭的功能，因爲它在默認情況下繼承範圍。

從反應文檔：

handleClick =() => { 
    console.log('this is:', this); 
}

見：https://facebook.github.io/react/docs/handling-events.html

第二件事 - 不要使用jQuery。您正在使用React來管理DOM，並且jQuery默認會產生副作用，所以它會影響反應的工作方式。 React根據組件的狀態或道具自動渲染你的視圖，並且它的優化非常棒，jQuery不會編輯道具和狀態，所以你不會利用任何反應的很酷的東西。

對於你想達到的目標，你可以給你的動作處理器一個參數，告訴你哪個塊已被點擊onClick={() => activateKey(1)}。在處理程序中，將活動ID保存在本地狀態中，並根據其ID是否與密鑰ID匹配來有條件地給予塊。這是我的想法。

來源

2017-02-09 21:48:56

很好解釋清楚。謝謝 –

在render方法中使用ES6箭頭函數或.bind（）會給組件添加不必要的開銷。你真的應該.bind（這個）你在構造方法類似這樣：

import React, { Component } from "react"; 

export default class Demo extends Component { 
    constructor(props) { 
     super(props); 

     this.activateKey = this.activateKey.bind(this); 
    } 

    activateKey() { 
     console.log("ddd"); 
    } 

    render() { 

     return (
      <div className="row-par"> 
       <div className="details-cont"></div> 
       <div className="key-cont"> 
        <div onClick={this.activateKey} className="key">asd</div> 
        <div onClick={this.activateKey} className="key">qwe</div> 
        <div onClick={this.activateKey} className="key">zxc</div> 
        </div> 
       </div> 
     ); 
    } 
}

如果你這樣做，綁定操作僅每一次的方法在類的初始化階段進行。如果在渲染方法中使用ES6箭頭函數或.bind（this等等），則將在每次重新渲染時從每個具有onClick事件的元素執行綁定。

在render方法中，唯一一次應該使用.bind（this等等）或ES6箭頭函數的情況是，如果您需要傳遞除click事件以外的其他內容給函數。

來源

2017-04-15 04:14:34

反應剝離出來的onclick

回答

相關問題