使用jquery对slideToggle做出反应

小编典典

使用jquery对slideToggle做出反应

reactjs

我试图通过制作带有可折叠项的菜单来学习一些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文件与每个带有事件处理程序的组件文件捆绑在一起。

阅读 434

2020-07-22

共1个答案

小编典典

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>。

2020-07-22