React函数组件中的函数无法触发调用问题求助

问题根源 #

你的代码存在核心错误：向TimerForm传递formClose属性时，直接执行了handleFormClose()而非传递函数本身。这会导致组件渲染时立刻触发handleFormClose，将formState重置为false，组件随即重新渲染回按钮状态，使得按钮的点击事件看似从未生效。

修正后的代码 #

import { useState } from 'react'
import { AiOutlinePlus } from 'react-icons/ai'
import { TimerForm } from './TimerForm'

export const ToggleAddTimer = () => {
  const [formState, setFormState] = useState(false);

  const handleFormOpen = () => {
    setFormState(true);
  }

  const handleFormClose = () => {
    setFormState(false);
  }

  if (formState) {
    // 传递函数引用，而非立即调用函数
    return (
      <TimerForm formClose={handleFormClose} />
    )
  } else {
    // 简化onClick绑定，直接传递函数引用
    return (
      <button onClick={handleFormOpen}>
        点击打开表单
        <AiOutlinePlus/>
      </button>
    )
  }
}

关键说明 #

• 给组件传递回调属性时，必须传递函数引用（如handleFormClose），而非函数调用结果（handleFormClose()）。后者会在组件渲染阶段立即执行，打乱状态流转逻辑。
• 按钮的onClick事件可以直接绑定函数引用，无需额外包裹箭头函数，只有需要传递参数时才需要箭头函数包裹。

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