React Hooks onClick事件：在调用父函数之前调用子函数

Question

在我下面的代码中，如何在执行父函数togglePage之前调用executeBeforeToggle函数？

import * as React from "react";
import { useState } from "react";
import { render } from "react-dom";

const Page1 = (props) => {  

  //how to call this function before toggling?
  const executeBeforeToggle = () => {
    alert('HOORAY')
  }

  return (
      <div>
        <h1>I am Page 1</h1>
        <button onClick={() => props.togglePage()}>Toggle</button>
      </div>      
    )
};

const Page2 = (props) => {
  return (
    <div>
      <h1>I am Page 2</h1>
      <button onClick={() => props.togglePage()}>Toggle</button>
    </div>      
  )
}

const App = () => {
  const [page, setPage] = useState(false)

  const togglePage = () => {    
    setPage(!page)
  }


  if(page === false) return <Page1 togglePage={togglePage} />
  else return <Page2 togglePage={togglePage}  />
}



render(<App />, document.getElementById("root"));

Answer 1

不确定我是否正确理解了您的问题，但实际上这很简单：

const Page1 = (props) => {  

  const executeBeforeToggle = () => {
    alert('HOORAY')
  }

  const handleClick = () => { // click handler which exec both funcs
    executeBeforeToggle();
    props.togglePage();
  }

  return (
      <div>
        <h1>I am Page 1</h1>
        <button onClick={handleClick}>Toggle</button>
      </div>      
    )
};

所以主要思想是你的点击处理程序应该是一个函数，它按照你需要的顺序执行executeBefore 和togglePage 函数。您可以在按钮 onClick 内直接写，或者（如上）创建单独的函数并将其传递给 onClick，这会使代码更具可读性。