使用jquery对slideToggle做出反应
我试图通过制作带有可折叠项的菜单来学习一些React。我正在使用jQuery的slideToggle函数,但无法正常工作。
react代码的相关部分是这样的:
var CollapsableMenuItem = React.createClass({ toggleDescription: function(el) {
$(el).slideToggle();
},
render: function() {
return (
<li>
<label className='title'
onClick={this.toggleDescription.bind(this)}>
{this.props.item.title}
</label>
<div className='description'>
<label>
{this.props.item.body}
</label>
</div>
</li>
);
}
});
尽管我目前正在尝试滑动切换“ this”,但将来需要更改为
$(el).parent().find('.description').slideToggle();
因为这是需要滑动切换的实际元素
绑定“ this [element]”的正确方法是什么,以便jQuery可以对它进行slideToggling?
我目前正在研究这个小提琴,那里还有其他一些您可以忽略的内容。相关代码在javascript部分的底部
想到的第二个问题:使用jQuery.ready函数将click事件等与react绑定是不好的做法吗?
从理论上讲,我可以将jquery文件与每个带有事件处理程序的组件文件捆绑在一起。
回答:
this
React中的上下文不是元素,而是React组件。jQuery不了解如何将其用作选择器。
您需要获取要使用jQuery控制的元素的引用。
makeTogglable: function(element) { $element = $(element);
this.toggle = function() {
$element.slideToggle();
};
},
render: function() {
return (
<li>
<label onClick={this.toggle}></label>
<div ref={this.makeTogglable}></div>
</li>
);
}
该REF道具需要一个回调,当部件安装这将运行。DOM元素将传递给回调,以便您可以直接使用它。
在这种情况下,我们使用它来创建和公开一个新this.toggle
方法,该方法调用.slideToggle
元素。
最后,我们将新this.toggle
方法传递给onClick
要触发切换的元素的处理程序。在这种情况下,它是<div>
。
以上是 使用jquery对slideToggle做出反应 的全部内容, 来源链接: utcz.com/qa/403674.html