选择包含jquery的当前元素
选择包含jquery的当前元素
提问于 2018-05-14 06:16:59
我使用的是react v16和jQueryv3.3.1，默认情况下，this在react中引用它自己的类，我的问题是如何在react组件中使用$(this)来选择当前的元素。
我的代码如下：
import React from 'react';
const $ = require('jquery');
export default class JunkListItem extends React.Component {
constructor(props ) {
super(props);
this.state={
selected: false,
};
this.setIndex = this.setIndex.bind(this);
}
setIndex() {
if ($('.check-box > div').hasClass('scale-off')){
$(this).removeClass('scale-off');
}else{
$(this).addClass('scale-off')
}
}
render() {
return(
<li className="item">
<div className="image-box">
<img className="no-select" src={`./images/${this.props.src}.${this.props.type}`} alt={this.props.itemName}/>
</div>
<div className="details">
<h3>{this.props.itemName}</h3>
<p>{this.props.itemDetails}</p>
</div>
<div className="check-box" onClick={this.setIndex}>
<div className='selected' />
</div>
</li>
);
}
} 我有许多复选框，当我单击每个复选框时，只需更改我选择的复选框。但是$(this)引用的是当前组件，而不是当前元素。
请指导我问题出在哪里？
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-14 06:25:39
使用带有React的jquery并不理想，因为jquery修改了原始DOM，并根据VirtualDOM的原则进行性能优化，因此可以有条件地将类传递给以下元素
export default class JunkListItem extends React.Component {
constructor(props ) {
super(props);
this.state={
selected: false,
classValue: ''
};
this.setIndex = this.setIndex.bind(this);
}
setIndex() {
if (!this.state.classValue !== ''){
this.setState({classValue: 'scale-off'})
}else{
this.setState({classValue: ''})
}
}
render() {
return(
<li className="item">
<div className="image-box">
<img className="no-select" src={`./images/${this.props.src}.${this.props.type}`} alt={this.props.itemName}/>
</div>
<div className="details">
<h3>{this.props.itemName}</h3>
<p>{this.props.itemDetails}</p>
</div>
<div className="check-box" onClick={this.setIndex}>
<div className={`selected ${this.state.classValue} />
</div>
</li>
);
}
} Stack Overflow用户
发布于 2018-05-14 06:49:13
您可以如下所示绑定此上下文
onClick={this.setIndex.bind(this)}
setIndex(e) {
var currentTarget= $(e.currentTarget); //in case you wanted to use jQuery
}因为函数是event事件绑定的。因此，您总是得到当前元素的事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50324053
复制相关文章
相似问题
腾讯云开发者
