如何在onClick事件绑定中传递参数？

Posted 2023-02-22

【中文标题】如何在onClick事件绑定中传递参数？

【英文标题】：How to pass parameters in onClick event bind?

【发布时间】：2017-02-05 00:13:45

【问题描述】：

我在 ListItem 中设置了 onClick 事件。然后在调用的方法上调用.bind 以传入单击的列表项的 id 和 name 值。

以下SO question 建议使用绑定，但似乎将 onCLick 事件添加到 ListItem 会破坏列表绑定。

在添加点击事件之前，绑定到asset.name 的列表跨度按预期工作并且列表已填充。

另外，如果我尝试不带参数的onClick=this._onAssetSelected()，点击事件将不起作用。

问题：

如何在 JSX 的 onClick 事件绑定中传递参数？

列表定义：

                <List selectable=true selected=0>  
                

                    this.state.data.map(function (asset) 
                        return (
                            <ListItem justify="between" onClick=this._onAssetSelected.bind(this, asset.name, asset.id) >
                                <span>asset.name</span>
                            </ListItem>
                        );
                    )

                
                </List>

点击事件调用的方法：

   _onAssetSelected(assetName, assetID) 

    console.log(assetName);  
    console.log(assetID);    


    

【参考方案1】：

你可以这样做。定义一个anonymous 函数作为回调，在其中你可以使用参数调用你的方法。跳出帮助！

<List
  selectable=true
  selected=0>  
  

    this.state.data.map(function (asset) 
        return (
            <ListItem
              justify="between"
              onClick=(e) => this._onAssetSelected(asset.name, asset.id, e) >
                <span>asset.name</span>
            </ListItem>
        );
    )

  
</List>

【讨论】：

使用典型的闭包是要走的路。我也会传递完整的资产对象而不是特定的属性。

所以我定义了一个匿名函数如上。开发工具中的控制台告诉我Uncaught TypeError: Cannot read property '_onAssetSelected' of undefined 我可以看到这个方法是在类中定义的。还是我在这里遗漏了什么？

您应该在渲染中的return 之前添加var _this = this，并在地图中使用_this._onAssetSelected。

好的，行得通！为什么我需要为 _this 声明一个 var 而不仅仅是使用 .this？

那是因为map里面的this会有map函数的上下文。但是，您的回调位于地图之外的 React 上下文中。所以你需要使用外部上下文来调用你的回调。这就是为什么你需要将 React 的上下文复制到 _this 并在 map 中使用它。我正在通过手机回复评论，所以，请原谅格式。并考虑批准答案。