Question

我有一个<ul>组件包装了一些<li>组件。我想避免为每个onClick添加li处理程序，而是使用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>
        )
    }   
}

Answer 1

我的解决方案是为每个孩子添加一个String date = "14000101"; TemporalAccessor ta = DateTimeFormatter.ofPattern("uuuuMMdd") .withChronology(HijrahChronology.INSTANCE) .parse(date); HijrahDate hDate = HijrahDate.from(ta); System.out.println("hDate = " + hDate); System.out.println("Gregorian date = " + IsoChronology.INSTANCE.date(hDate).toString());属性，用于识别该组件。

这可以避免添加多个事件侦听器，同时还可以避免多个data-index回调的开销来获取子DOM元素：

ref

React Event Bubbling：查找目标组件

1 个答案: