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

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

executebeforetokle

函数

togglePage

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

import*as React from“React”；
从“react”导入{useState}；
从“react dom”导入{render}；
常量Page1=（道具）=>{
//切换前如何调用此函数？
const executebeforetokle=（）=>{
警报（“万岁”）
}
返回(
我是第一页
props.togglePage（）}>Toggle
)
};
常量页面2=（道具）=>{
返回(
我是第二页
props.togglePage（）}>Toggle
)
}
常量应用=（）=>{
const[page，setPage]=useState（false）
const togglePage=（）=>{
设置页面（！页面）
}
如果（第===false页）返回
否则返回
}
render（，document.getElementById（“根”））；

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

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

constpage1=（道具）=>{
const executebeforetokle=（）=>{
警报（“万岁”）
}
const handleClick=（）=>{//单击执行这两个函数的处理程序
executeBeforeTokle（）；
props.togglePage（）；
}
返回(
我是第一页
切换
)
};

---

因此，主要思想是，您的单击处理程序应该是一个函数，它可以按照您需要的顺序执行

executeBefore

和

togglePage

函数。您可以将其写在按钮

onClick

中，或者（如上）创建单独的函数并将其传递到

onClick

使代码更具可读性。

如何添加一个异步函数

const executebeforetokle=async（）=>{alert（'HOORAY'）}

，然后使用

executebeforetokle（）。然后（（）=>{props.togglePage（）}）

只是为了确保函数按OP所需的顺序执行？谢谢，这很有效。实际上，在我的实际代码中，我正在使用typescript，并试图创建一个类似的场景。@AtaurRahmanMunna可以，但实际上没有任何意义，因为没有异步功能：）而且它将返回一个承诺，因此所有/ts linters可能会抱怨有未处理的承诺传递给click handler。接受了答案。抱歉，新手错误，在我的typescript实际代码中，我只需要将类型从

saveDataOrReturn:React.MouseEventHandler

更改为

saveDataOrReturn:（）=>void

。这与我的帖子无关，但你的回复帮助我指出了我做错的地方。我认为还有其他方法可以解决我的问题。