2016-07-27 24 views
21

Oto podstawowy komponent. Zarówno funkcje <ul>, jak i <li> mają funkcje onClick. Chcę tylko onClick na <li> do ognia, a nie <ul>. Jak mogę to osiągnąć?Reagowanie przed propagowaniem zdarzeń w komponentach zagnieżdżonych po kliknięciu

Grałem z e.preventDefault(), e.stopPropagation(), bez rezultatu.

class List extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleClick() { 
    // do something 
    } 

    render() { 

    return (
     <ul 
     onClick={(e) => { 
      console.log('parent'); 
      this.handleClick(); 
     }} 
     > 
     <li 
      onClick={(e) => { 
      console.log('child'); 
      // prevent default? prevent propagation? 
      this.handleClick(); 
      }} 
     > 
     </li>  
     </ul> 
    ) 
    } 
} 

// => parent 
// => child 
+0

Miałem to samo pytanie, https://stackoverflow.com/questions/44711549/how-to-prevent-react-component-click-event-bubble-to-document –

Odpowiedz

28

Miałem ten sam problem. Znalazłem stopPropagation zrobiłem pracować. Chciałbym podzielić element listy do osobnego komponentu, a więc:

class List extends React.Component { 
    handleClick = e => { 
    // do something 
    } 

    render() { 
    return (
     <ul onClick={this.handleClick}> 
     <ListItem onClick={this.handleClick}>Item</li> 
     </ul> 
    ) 
    } 
} 

class ListItem extends React.Component { 
    handleClick = e => { 
    e.stopPropagation(); 
    this.props.onClick(); 
    } 

    render() { 
    return (
     <li onClick={this.handleClick}> 
     {this.props.children} 
     </li>  
    ) 
    } 
} 
+0

niesamowite! To działało jak czar! – asifsid88

+0

Nie powinno się 'this.props.handleClick()' w składniku 'ListItem' mieć wartość' this.props.click'? – ZeroDarkThirty

+0

Tak! Masz całkowitą rację. Zaktualizuję moją odpowiedź –

16

React wykorzystuje delegacji zdarzeń z jednego detektora zdarzeń na dokumencie dla zdarzeń, które bańki, jak „kliknięcie” w tym przykładzie, co oznacza zatrzymanie rozmnażania jest niemożliwe; rzeczywiste wydarzenie już się rozprzestrzeniło, zanim przejdziesz do niego w React. stopPropagation na syntetycznym wydarzeniu React jest możliwe, ponieważ React wewnętrznie obsługuje propagację zdarzeń syntetycznych.

stopPropagation: function(e){ 
    e.stopPropagation(); 
    e.nativeEvent.stopImmediatePropagation(); 
}