如何在React中使用slideToggle函数？

Question

我试图将这个javascript函数转换为反应语言。

$("#compare-btn").click(function(){
        $(".compare-show").slideToggle("slow");
    });

我想要做的就是在我点击“比较”按钮后，将div滑入页面并粘贴底部。知道我怎么能做到这一点？

Answer 1

你在React的例子应该是：

import React from 'react';
import $ from 'jquery';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.compareShow = React.createRef();
    this.slideToggle = this.slideToggle.bind(this);
  }

  slideToggle() {
    $(this.refs.compareShow.current).slideToggle();
  }

  render() {
    return (
      <React.Fragment>
        <button onClick={this.slideToggle}>Toggle</button>
        <div ref={this.compareShow} />
      </React.Fragment>
    );
  }
}