将当前元素传递给 onClick 函数 - React Jsx

Question

我有一个 div，我想将thisdiv传递给 onlick 函数并更改它的类（或添加类）。

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

但这是打印当前的 React 组件类，它是 Paymentdetail.

我想要的是：

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

编辑： 我有多个history-node元素。因此，添加状态以更改类将不适用于多个元素。

我如何实现这一目标？

Answer 1

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