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

Question

可能是一个愚蠢的问题，但我正在使用 aa 插件来平滑滚动到一个元素，我在边栏上有一个按钮，我想使用这个插件，但我也希望边栏在我单击按钮时关闭。 我有一个 function 关闭了我通过道具传递的侧边栏，但我不太确定如何将两者结合起来使用一个按钮。 基本上，我怎样才能将这两个按钮合二为一..

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>

)
}

Answer 1

你只需要这样做：

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>
  );
};

Answer 2

您可以像这样调用这两个函数：

<button 
  onClick={(event) => {
    scrollTo("#home-page");
    props.hide(event)
  }}
>
  Home Page
</button>

Answer 3

你只需要定义事件单独调用它 onClick 的按钮。

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

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

  return (
    <nav className={sidebar}>
      <ul>
        <li>
          <button onClick={ClickTheHandle}>Home Page</button>
        </li>
      </ul>
    </nav>
  );
};

Answer 4

试试这个代码：

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

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

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