如何在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>

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

How to pass parameters in onClick event bind?

ecmascript-5

reactjs

react-jsx