將當前元素傳遞給onClick函數 - React Jsx

我有一個div，我想將this div傳遞給onlick函數，並更改它的類（或添加類）。將當前元素傳遞給onClick函數 - React Jsx

<div className="history-node" onClick={() => this.handleHistoryClick(this)}> 
    <span className="history-title">Uploaded</span> 
    <span className="history-date">October 9, 2017</span> 
</div>

功能是：

handleHistoryClick(el){ 
     console.log("History Clicked"); 
     console.log(el); 
}

但這打印當前陣營組件類是 Paymentdetail。

我要的是：

handleHistoryClick(el){ 
    $(el).addClass('active'); 
}

編輯：我有多個history-node元素。所以添加狀態來改變類不適用於多個元素。

我該如何做到這一點？

來源

2017-10-18 Noman Ali

的可能的複製[反應狀態變化改變類名（https://stackoverflow.com/questions/35224113/react-change-class-name-on-state-change） – azium

不，不是。因爲我有多個'history-node'元素。如何確定所有人的狀態？只有一個可以有'活躍'狀態。 –

然後存儲一個狀態數組，不只是一個 – azium

在你的代碼this指成分而不是元素：

<div className="history-node" onClick={() => this.handleHistoryClick}> 
    <span className="history-title">Uploaded</span> 
    <span className="history-date">October 9, 2017</span> 
</div>

組件：

handleHistoryClick(event){ 
     let el = event.target; 
     el.classList.add('active'); 
     // $(el).addClass('active'); I'm not familiar with jquery but try it 
}

編輯：正如@ sag1v說：這是最好的處理程序綁定在構造函數（或使用箭頭函數），而不是在每個渲染上創建一個新的函數實例。只是這樣的：

constructor(){ 
    this.handleHistoryClick= this.handleHistoryClick.bind(this); 
}

來源

2017-10-18 14:04:27

最好在構造函數中綁定處理程序（或使用箭頭函數），而不是在每個渲染上創建新的函數實例 –

您是對的，我會更新:) –

通常，您希望React處理修改DOM。這個答案有點脆弱，取決於其他代碼的寫法 – azium

將當前元素傳遞給onClick函數 - React Jsx

回答

相關問題