React 事件冒泡：寻找目标组件

Question

我有一个 <ul> 组件包装了一些 <li> 组件。我想避免向每个 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>
        )
    }   
}

Answer 1

我的解决方案是为每个子项添加一个 data-index 属性，该属性可用于标识组件。

这避免了添加多个事件侦听器，同时也避免了多次 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>
        )
    }   
}

React 事件冒泡：寻找目标组件

React Event Bubbling: Finding the target Component

javascript

event-bubbling

dom-events

reactjs