Реакция предотвращает пузырьки событий во вложенных компонентах при нажатии

Question

Вот базовый компонент. И <ul>, и <li> имеют функции onClick. Я хочу только onClick на <li>, чтобы стрелять, а не <ul>. Как я могу это достичь?

Я играл с e.preventDefault(), e.stopPropagation(), но безрезультатно.

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 

Answer 1

У меня была та же проблема. Я нашел stopPropagation сделал работа. Я хотел бы разделить элемент списка в виде отдельного компонента, как это:

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

Answer 2

Реагировать использует делегирование событий с помощью одного слушателя событий на документе для событий, пузырь, как «щелчок» в этом примере, что означает прекращение распространения является невозможно; реальное событие уже распространилось к тому моменту, когда вы взаимодействуете с ним в React. stopPropagation на синтетическом событии React возможно, потому что React обрабатывает распространение синтетических событий внутри.

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