时间戳

首页 > 解决方案 > 使用 React，我无法将带有参数的函数发送到我的一个组件

javascript - 使用 React，我无法将带有参数的函数发送到我的一个组件

问题描述

我将 React 与 NextJS 一起使用

我想要做的是能够向我的“警报”组件发送一个具有参数的函数，以便它可以在执行该函数之前等待用户反馈。

例如，在清除列表之前，我想确保用户在实际触发该功能之前可以确认。

所以，基本上是从这行代码开始的

pushAlert(closeAlert, "New List Warning", "Generating a new list will erase all unlocked instruments. Would you like to continue?", "danger", () => {generateNewList(min, max)}, undefined, false)

将注意力集中在第五个道具上，即 '() => {generateNewList(min, max)}' 部分。此外， min 和 max 都是父函数的参数

这是 pushAlert 的样子

const pushAlert = (onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText, buttonless) => {
        setAlerts([...alerts, {
            "key": keyInc,
            "onClosing": onClosing,
            "alertHeading": alertHeading,
            "alertText": alertText, 
            "alertVariant": alertVariant, 
            "methodToExecute": methodToExecute,
            "buttonText": buttonText,
            "buttonless": buttonless
        }])

        setKeyInc(keyInc + 1)

        console.log(methodToExecute)
    }

基本上，我将所有警报存储在一个数组中，然后我将这些 JS 对象发送到一个反应组件，该组件将为我在该数组中的每个警报生成引导警报。

很标准的东西。

为简洁起见，这里是在我的 Alerts 函数中使用“methodToExecute”的地方。只是不想用可能不相关的代码轰炸你，让我知道我是否需要粘贴更多内容。

<Button variant={alert.alertVariant} onClick={()=> {alert.methodToExecute != undefined ? alert.methodToExecute : onClosing(alert.key)}}>{alert.buttonText != undefined ? alert.buttonText : 'OK'}</Button>

但是当前代码不起作用。我最初用于将函数推送到新警报对象中的语法是否存在问题？或者是别的什么？

我已经完成并记录了“methodToExecute”，奇怪的是，当我记录它时，它实际上返回了调用第一行代码的父函数。

谢谢你的帮助！让我知道我是否需要添加一些我排除的代码！

标签： javascriptreactjsnext.jsreact-bootstrap

解决方案

根据您的Button代码，您似乎根本没有调用methodToExecute回调函数。

<Button
  variant={alert.alertVariant}
  onClick={() => {
    alert.methodToExecute != undefined 
      ? alert.methodToExecute // <-- not invoked!!
      : onClosing(alert.key);
  }}
>
  {alert.buttonText != undefined ? alert.buttonText : 'OK'}
</Button>

鉴于：

pushAlert(
  closeAlert,
  "New List Warning",
  "Generating a new list will erase all unlocked instruments. Would you like to continue?",
  "danger",
  () => { generateNewList(min, max); },
  undefined,
  false
)

第五个参数是一个函数，应该在按钮的onClick处理程序中调用。

<Button
  variant={alert.alertVariant}
  onClick={() => {
    alert.methodToExecute != undefined 
      ? alert.methodToExecute() // <-- invoked!!
      : onClosing(alert.key);
  }}
>
  {alert.buttonText != undefined ? alert.buttonText : 'OK'}
</Button>

推荐阅读