使用jquery對slideToggle做出反應

Question

我試圖通過制作帶有可折疊項的菜單來學習一些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文件與每個組件文件及其事件處理程序捆綁在一起。

Answer 1

的背景下this在陣營是不是元素，它的陣營組成部分。 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> 。