使用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文件与每个带有事件处理程序的组件文件捆绑在一起。

回答:

thisReact中的上下文不是元素,而是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

回到顶部