如何在同一个按钮上使用onClick调用这两个函数?

可能是一个愚蠢的问题,但我正在使用一个插件来平滑滚动到某个元素,并且边栏上有一个按钮,我想与该插件一起使用,但是我也想在单击按钮时关闭边栏。我有一个函数可以关闭通过道具传递的侧边栏,但是我不确定如何将两者结合在一起使用一个按钮。基本上,如何将这两个按钮合为一体。

import React from "react"
import "./sidebar.css"
import scrollTo from "gatsby-plugin-smoothscroll"

const Sidebar = props => {

 return (
<nav className={sidebar}>
  <ul>
    <li>
      <button onClick={props.hide}>Home</button>
    </li>
    <li>
      <button onClick={() => scrollTo("#home-page")}></button>
    </li>
  </ul>
</nav>

)
}
评论
99.90%
99.90%

您可以简单地调用以下两个函数:

<button 
  onClick={() => {
    scrollTo("#home-page");
    props.hide()
  }}
>
  Home Page
</button>
点赞
评论
劫走EXO
劫走EXO

您只需要这样做:

const Sidebar = props => {
  const handleClick = e => {
    props.hide(e);
    scrollTo("#home-page");
  };

  return (
    <nav className={sidebar}>
      <ul>
        <li>
          <button onClick={handleClick}>Home</button>
        </li>
      </ul>
    </nav>
  );
};
点赞
评论