Javascript React事件冒泡：查找目标组件

我有一个

组件包装了一些

组件。我希望避免向每个

li

添加

onClick

处理程序，而是在

ul

上使用单个处理程序并捕获冒泡事件

从冒泡事件确定/分配单击组件的正确方法是什么

class ListItemComponent extends React.Component {
    public render() {
        return (
            <li>Foo</li>
        )
    }
}

class ListComponent extends React.Component {
    private handleClick(event) {
        const target = event.target;
        // Determine clicked component, or index etc … ?
    }

    public render() {
        const items = this.props.items.map((x, i) => {
            <ListItemComponent active=“false” key={i} />    
        })
        return (
            <ul onClick={this.handleClick} />
                { items }
            </ul>
        )
    }   
}

类ListItemComponent扩展了React.Component{
公共渲染（）{
返回(
福
)
}
}
类ListComponent扩展了React.Component{
私人掌拍（活动）{
const target=event.target；
//确定单击的组件或索引等？
}
公共渲染（）{
const items=this.props.items.map（（x，i）=>{
})
返回(

{items}

)
}   
}

我的解决方案是为每个子级添加一个

数据索引

属性，该属性可用于识别组件

这避免了添加多个事件侦听器，同时也避免了多个

ref

回调以获取子DOM元素的开销：

class ListItemComponent extends React.Component {
    public render() {
        return (
            <li data-index={this.props.index}>Foo</li>
        )
    }
}

class ListComponent extends React.Component {
    private handleClick(event) {
        const activeIndex = event.target.getAttribute('data-index');
        this.setState({ activeIndex });
    }

    public render() {
        const active = this.state.activeIndex;
        const items = this.props.items.map((x, i) => {
            <ListItemComponent active={i === active} key={i} index={i} />    
        })
        return (
            <ul onClick={this.handleClick} />
                { items }
            </ul>
        )
    }   
}

类ListItemComponent扩展了React.Component{
公共渲染（）{
返回(
Foo
)
}
}
类ListComponent扩展了React.Component{
私人掌拍（活动）{
const activeIndex=event.target.getAttribute（'data-index'）；
this.setState（{activeIndex}）；
}
公共渲染（）{
const active=this.state.activeIndex；
const items=this.props.items.map（（x，i）=>{
})
返回(

{items}

)
}   
}

您不能在React中传递

事件。将
事件.target
直接传递到handleClick函数中。我不确定您建议的解决方案。你能举个例子吗？在我给出的例子中，我当然可以访问事件。我只是说，当你传递事件时，你真的得到了一个更难处理的事件。