需要两次单击元素

Question

我看过有关此问题的大多数帖子，但似乎没有一个适合我。 （我是React新手） 基本上我有这个js函数：

export function toggle() {
    "use strict"; // Start of use strict

    // Configure tooltips for collapsed side navigation
    $('.navbar-sidenav [data-toggle="tooltip"]').tooltip({
        template: '<div class="tooltip navbar-sidenav-tooltip" role="tooltip" style="pointer-events: 
        none;
        "><div class="
        arrow "></div><div class="
        tooltip - inner "></div></div>'
    })
    // Toggle the side navigation
    $("#sidenavToggler").click(function(e) {
            e.preventDefault();
            $("body").toggleClass("sidenav-toggled");
            $(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
            $(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third- 
                level ").removeClass("
                show ");
            });

        // Force the toggled class to be removed when a collapsible nav link is clicked
        $(".navbar-sidenav .nav-link-collapse").click(function(e) {
            e.preventDefault();
            $("body").removeClass("sidenav-toggled");
        });
        // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
        $('body.fixed-nav .navbar-sidenav, body.fixed-nav .sidenav-toggler, body.fixed-nav .navbar- 
            collapse ').on('
            mousewheel DOMMouseScroll ', function (e) {
            var e0 = e.originalEvent,
                delta = e0.wheelDelta || -e0.detail; this.scrollTop += (delta < 0 ? 1 : -1) * 30; e.preventDefault();
        });
})(jQuery); // End of use strict

用于缩小边栏。关键是我需要单击两次以使边栏变小。我是这样做的。在这里，我收到函数：

const Border = ({ isClicked }) => (

然后从元素中调用它：

<a onClick="{isClicked}" className="nav-link text-center" id="sidenavToggler">
  <i className="fa fa-fw fa-angle-left"></i>
</a>

这是调用const的类：

class CitasPage extends React.Component {
  handleToggleCreate = () => {
    toggle();
    this.setState({});
  };
  render() {
    return (
      <div className="content-wrapper">
        <Border isClicked={this.handleToggleCreate}></Border>
        <Citas />
      </div>
    );
  }
}

export default CitasPage;