在 React 中将变量传递给 onClick

Question

我正在使用 React 和（至少现在）使用具有 和 标签的 Material-UI 来开发我的 UI。在 ListItem 内，我想检测对图标的单击。问题是我的列表将有许多列表项，我想将列表项的索引传递到我的点击处理程序中。但我还需要传入点击事件本身。我的代码如下所示：

class SomeList extends React.Component { 

    handleClickDeleteIcon(e) {
        e.stopPropagation();
        console.log('Fired handleClickDeleteIcon()!');
    }

    everywhereClickFunction(e) {
        console.log('Fired everywhereClickFunction()!');
    }

    render() {
        return (
            <List>
              <Subheader inset={true}>Some Files</Subheader>
              <ListItem
                leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
                rightIcon={
                    <div onClick={this.handleClickDeleteIcon}>
                        <DeleteForever />
                    </div>
                }
                primaryText="Vacation itinerary"
                secondaryText="Jan 20, 2014"
                onTouchTap={this.everywhereClickFunction}
                onClick={this.everywhereClickFunction}
              />
              <ListItem
                leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
                rightIcon={
                    <div onClick={this.handleClickDeleteIcon}>
                        <DeleteForever />
                    </div>
                }
                primaryText="Kitchen remodel"
                secondaryText="Jan 10, 2014"
              />
              <ListItem
                leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
                rightIcon={
                    <div onClick={this.handleClickDeleteIcon}>
                        <DeleteForever />
                    </div>
                }
                primaryText="Something else"
                secondaryText="Nov 08, 2017"
              />
            </List>
        );
    }
);

那么我如何使用 onClick 为每个 rightIcon 传递一个变量（如列表索引或一些唯一的 id），我可以在handleClickDeleteIcon（e）中使用？请注意，我还需要 handleClickDeleteIcon 来获取事件 e，因此我无法调用 e.stopPropagation()。

Answer 1

您可以创建一个匿名函数并使用参数调用您的函数，如下所示：

<div onClick={e => this.handleClickDeleteIcon(e, index)}>
  <DeleteForever />
</div>