React函数组件传递带参函数Props给子组件时参数失效问题

核心问题 #

你的代码存在两处关键错误，导致点击OK按钮时console.log输出事件对象而非预期的输入值：

1. 子组件Button的onClick绑定错误

子组件中这段代码：

<Button onClick={props.submitHandler(formInput)}>OK</Button>

这里直接执行了props.submitHandler(formInput)，属于组件渲染阶段就触发函数，而非点击按钮时才触发。当点击事件真正发生时，React会默认把事件对象作为参数注入回调，最终覆盖了你传入的formInput，导致addNewActivity接收到的是事件对象。

2. 父组件传递submitHandler的写法错误

父组件中这段代码：

submitHandler={() => addNewActivity}

这个箭头函数仅返回addNewActivity函数本身，既没有接收参数，也没有调用它。即便子组件正确传递了formInput，这个箭头函数也无法把参数传递给addNewActivity。

修复步骤 #

第一步：修正子组件的onClick绑定

用箭头函数包裹，确保点击按钮时才调用submitHandler并传入formInput：

<Button onClick={() => props.submitHandler(formInput)}>OK</Button>

第二步：修正父组件的submitHandler传递

有两种简洁的写法可选：

• 写法一（推荐）：直接传递addNewActivity函数本身

<FormModal
  buttonText="+ Add"
  modalTitle="Enter activity here"
  modalText=""
  placeholder="Activity Name"
  submitHandler={addNewActivity}
/>

• 写法二（适合需要额外逻辑处理的场景）：用箭头函数显式接收参数并调用

<FormModal
  buttonText="+ Add"
  modalTitle="Enter activity here"
  modalText=""
  placeholder="Activity Name"
  submitHandler={(activity) => addNewActivity(activity)}
/>

修复后效果 #

点击OK按钮时，子组件会通过箭头函数把输入框的状态值formInput传给父组件的addNewActivity，此时console.log(newActivity)就能输出预期的输入内容。

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