Question

我有一个div，我想将this div传递给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 Component Class 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);
}

Answer 2

代替使用this.handleHistoryClick（this）}>

使用此...

this.handleHistoryClick.bind（this）}>

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

2 个答案: