onFocus bolla in React

Question

jsfiddle: https://jsfiddle.net/leiming/5e6rtgwd/

class Sample extends React.Component { 
 

 
    onInputFocus(event) { 
 
    console.log('react input focus') 
 
    } 
 

 
    onSpanFocus(event) { 
 
    console.log('react span focus') 
 
     // event.stopPropagation() 
 
    } 
 

 
    render() { 
 
    return (<span onFocus = {this.onSpanFocus}> 
 
     react input: <input type="text" 
 
     onFocus = {this.onInputFocus} /> 
 
     </span>) 
 
    } 
 
} 
 

 
ReactDOM.render(< Sample/> , 
 
    document.getElementById('container') 
 
);

<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div> 
 

 
<div> 
 
    <span onfocus="(function(){console.log('normal span')})()"> 
 
    normal input:<input type="text" onfocus="(function(){console.log('normal input focus')})()"> 
 
</span> 
 
</div>

jsfiddle: https://jsfiddle.net/leiming/5e6rtgwd/

Utilizzando Reagire, onFocus in <input/> si bolla che non è uguale al solito HTML5.

Qualcuno potrebbe darmi il documento di riferimento perché focalizzare le bolle con React?

Answer 1

focus eventi do not bubble, quindi sei corretto che il comportamento in React differisce da quello del DOM. Il DOM ha un evento focusinthat does bubble; ecco una dimostrazione:

<div> 
 
    <span onfocus="(function(){console.log('span focus')})()"> 
 
    onfocus: <input type="text" 
 
       onfocus="(function(){console.log('input focus')})()"> 
 
    </span> 
 
</div> 
 

 
<div> 
 
    <span onfocusin="(function(){console.log('span focusin')})()"> 
 
    onfocusin: <input type="text" 
 
       onfocusin="(function(){console.log('input focusin')})()"> 
 
    </span> 
 
</div>

Guardando attraverso the React source code, sembra che questo è stato intenzionale; il codice verifica se il browser supporta o meno l'evento focuscon l'acquisizione di e lo implementa tramite l'evento focus con ReactEventListener.trapCapturedEvent anziché ReactEventListener.trapBubbledEvent. Questo è necessario perché React implementa il suo sistema di eventi sintetici utilizzando la delega degli eventi, e quindi deve utilizzare sia l'acquisizione che il bubbling per tutta la sua gestione degli eventi. The article linked to in the comment spiega come funziona:

Il problema è che questi eventi non danno bolle. Un evento di messa a fuoco o sfocatura su un collegamento si attiva solo sul collegamento stesso e non su alcun elemento di antenato del collegamento.

Questa è una regola antica. Alcuni eventi, in particolare la messa a fuoco, la sfocatura e il cambiamento, non fanno esplodere l'albero dei documenti. Le ragioni esatte di ciò sono andate perse nella nebbia della storia, ma parte della causa è che questi eventi non hanno senso su alcuni elementi. L'utente non può focalizzare o modificare un paragrafo casuale in alcun modo, e quindi questi eventi non sono disponibili su questi elementi HTML. Inoltre, non si gonfiano.

...

Tranne quando si utilizza la cattura evento.

...

Una delle più curiose conclusioni della mia ricerca evento è che quando si definiscono i gestori di eventi in fase di cattura il browser esegue ogni e tutti i gestori di eventi impostati antenati del target dell'evento se il dato evento ha senso su questi elementi o no.

sembra abbastanza probabile che la squadra Reagire ha deciso di fare semplicemente l'evento sempre bolla (che, ad essere onesti, è quello che mi aspettavo dalle specifiche DOM e fino a quando ho letto la tua domanda). Le implementazioni del browser non sembrano essere coerenti; one issue comment menziona che gli eventi focus sono in bolla in Firefox, ma non sono stato in grado di riprodurlo in una versione recente. Tuttavia, l'utilizzo di un attributo onfocusin o l'utilizzo di addEventListener("focusin", ...) non ha funzionato anche in FF. Quindi è possibile che questo fosse semplicemente un tentativo di normalizzare gli eventi attraverso i browser.

Detto questo, sembra non c'è forse un bug in cui la proprietà .bubbles su una SyntheticFocusEvent è false invece di true.