Wie klickt man auf ein ReactJS-Wrapping-Element?

Question

Wenn ich auf ein Umbruchelement klicke, würde ich erwarten, dass eine Funktion auf diesem Umbruchelement ausgelöst wird. Stattdessen scheint es das innerste Element auszulösen.

In dem Fall unten, klickt auf "yo" logs undefined; Klicken Sie auf den Raum zwischen "yo" und "lippe" logs 1; und klick auf "lippe" logs undefined.

Ich würde erwarten, dass alle 3 1 loggen.

import React from 'react'; 

export default class Foo extends React.Component { 
    something = e => { 
    e.stopPropagation() 
    console.log(e.target.dataset.index) 
    } 

    render() { 
    return (
     <section data-index={1} onClick={this.something} ref={e => { this.section = e }}> 
     <h1 style={{ marginBottom: 30 }}>yo</h1> 
     <p>lip</p> 
     </section> 
    ) 
    } 
} 

CodeSandbox Demo

Answer 1

Sie das Verhalten, das Sie durch die Verwendung e.currentTarget statt e.target wollen bekommen.

Die docs for e.currentTarget state:

Identifiziert das aktuelle Ziel für das Ereignis, wie das Ereignis des DOM durchquert. Es bezieht sich immer auf das Element, an das der Ereignishandler angehängt wurde, im Gegensatz zu event.target, das das Element identifiziert, auf dem das Ereignis aufgetreten ist.

Hier ist a fork of your codesandbox using e.currentTarget.

import React from 'react'; 

export default class Foo extends React.Component { 
    something = e => { 
    e.stopPropagation() 
    console.log(e.currentTarget.dataset.index) 
    } 

    render() { 
    return (
     <section data-index={1} onClick={this.something} ref={e => { this.section = e }}> 
     <h1 style={{ marginBottom: 30 }}>yo</h1> 
     <p>lip</p> 
     </section> 
    ) 
    } 
} 

Answer 2

import React from 'react'; 

export default class Foo extends React.Component { 
    something = e => { 
    e.stopPropagation() 
    //console.log(e.target.dataset.index) 
    console.log(e.currentTarget.dataset.index) 
    } 

    render() { 
    return (
     <section data-index={1} onClick={this.something} ref={e => { this.section = e }}> 
     <h1 style={{ marginBottom: 30 }}>yo</h1> 
     <p>lip</p> 
     </section> 
    ) 
    } 
}