React Event Bubbling：查找目標組件

我有一個<ul>組件包裝了一些<li>組件。我想避免爲每個li添加onClick處理程序，而是在ul上使用單個處理程序並捕獲冒泡事件。React Event Bubbling：查找目標組件

從冒泡事件確定/分配點擊的組件的正確方法是什麼？

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

來源

2017-07-03 duncanhall

你不可錯過'event'各地反應。直接將'event.target'傳遞給你的handleClick函數。 – jmargolisvt

我不確定你提出的解決方案。你能提供一個例子嗎？在我給出的例子中，我當然可以訪問該事件。 – duncanhall

我只是說當你將事件傳遞給你時，真的會得到SyntheticEvent，這更難以處理。 – jmargolisvt

我的解決方案是將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> 
     ) 
    } 
}

來源

2017-07-04 09:01:09 duncanhall

-1

將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] 
}

我經常使用它。

來源

2017-07-03 16:39:07

這不起作用 - 事件處理程序中的event.target的值僅僅是HTML字符串。它沒有'id'屬性。你能舉一個有效的例子嗎？ – duncanhall

React Event Bubbling：查找目標組件

回答

相關問題