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

Question

我在 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);    


    }

Answer 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>