React中如何在if语句内调用多个函数？点击事件问题排查

你的代码里有两个关键错误导致函数无法正常触发，修复后就能实现多函数依次执行：

1. 修正onClick事件绑定方式 #

你当前写的onClick={handleFunc ()}会在组件渲染时立即执行handleFunc，而不是点击按钮时触发。正确的写法是传递函数引用，不要加括号：

<button onClick={handleFunc}> Call function</button>

2. 修正箭头函数语法错误 #

所有函数定义里的() = {都是语法错误，箭头函数必须写成() => {（箭头是=>不是=），否则函数无法被正确定义。

完整修正后的代码 #

const function1 = () => {
  // Block of code 
}

const function2 = () => {
  // Block of code 
}

const function3 = () => {
  // Block of code 
}

const handleFunc = () =>  {
  if( count === 0 ) {
    function1()
  }
  if( count === 1 ) {
    function1();
    function2();
  }
  if( count === 2 ) {
    function1();
    function2();
    function3();
  }
}

return (
  <>
    <button onClick={handleFunc}> Call function</button>
  </>
)

修复这两个问题后，点击按钮时，handleFunc会根据count的值依次调用对应的函数，多个函数会按顺序执行。

内容的提问来源于stack exchange，提问作者Beginner