reactjs 将函数作为属性传递给子函数时,单击[关闭]时不会运行函数

hrirmatl  于 2023-01-02  发布在  React
关注(0)|答案(2)|浏览(118)

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
22小时前关门了。
Improve this question
在我的应用程序组件中,我有一个函数作为 prop 传递给子组件。在这个子组件中,我有一个按钮,它有一个onClick,设置为从 prop 运行这个函数,但当我单击按钮时,它没有运行。不知道我错过了什么,谢谢。

应用程序jsx

function addGoalBtnClick() {
    console.log("Yep")
  }

  return (
    <div className="App">
      <AddGoalBtn addGoalBtnfunc={addGoalBtnClick} />
    </div>
  );

子组件

function AddGoalBtn(props) {
  console.log(props)

  return (
    <div className="add-goal-btn-wrapper">
      <button onClick={props.AddGoalBtnfunc} className="add-goal-btn">
        <FontAwesomeIcon icon={faPlus} size="2x" color="white" />
      </button>
    </div>
  );
}
qni6mghb

qni6mghb1#

问题是你传递的 prop 的大写。
您将其作为addGoalBtnfunc(* 第一个字母是a)传递,但在组件中将其作为props.AddGoalBtnfunc 第一个字母是A*)使用,因此由于在props中找不到它,因此它是undefined

7y4bm7vi

7y4bm7vi2#

您在子组件中将addGoalBtnfunc大写是错误的,但在父组件中它没有大写。更改此设置应该可以解决此问题。

相关问题