Question

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

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

在添加click事件之前，绑定到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函数定义为回调函数，在其中使用参数调用方法。 Hop ut帮助！

<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事件绑定中传递参数？

1 个答案: