リアクションイベントバブリング：ターゲットを探す

Question

私は<ul>コンポーネントをラップしています。<li>コンポーネント。私は、それぞれliにonClickハンドラを追加することを避け、代わりにulで1つのハンドラを使用し、バブリングされたイベントをキャプチャします。

バブリングされたイベントからクリックされたコンポーネントを特定/割り当てる正しい方法は何ですか？

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属性を追加することでした。

これは、複数のオーバーヘッドを回避しながら、子DOM要素を取得するためにrefコールバックを複数のイベントリスナーを追加回避：

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> 
     ) 
    } 
} 

Answer 2

このようにid propのイテレータをliコンポーネントに渡します。

const items = this.props.items.map((x, i) => { 
     <ListItemComponent active=“false” key={i} id={i} />  
    }) 

次に、handleClick関数のターゲットIDにアクセスします。

private handleClick(event) { 
    const target = event.target; 
    const item = this.props.items[event.target.id] 
} 

頻繁に使用します。