Evento di reazione e sfocatura

Question

Ho un semplice problema con React e gestione degli eventi. La mia componente si presenta così (in pratica una tabella):

const MyList = ({ items, onBlur }) => 
<table onBlur={onBlur}}> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Title</th> 
     <th>Publisher</th> 
     <th>Year</th> 
     <th>Author</th> 
     <th>System</th> 
     <th/> 
    </tr> 
    </thead> 
    <tbody> 
    {items.map(item => <MyListRow key={item.Id} item={item}/>)} 
    </tbody> 
</table>; 

voglio l'evento blur al fuoco solo se la messa a fuoco va fuori del tavolo. Invece l'evento si attiva su ogni elemento figlio della tabella quando perde lo stato attivo.

Secondo i documenti, React consente di evidenziare gli eventi di messa a fuoco.

La domanda è: come posso attivare il metodo onBlur solo quando lo stato attivo esce dalla tabella? IOW: Come posso filtrare e scartare gli eventi indesiderati che ribolliscono in modo da rivelare solo gli eventi che indicano una perdita di concentrazione per il tavolo?

Answer 1

Il problema è che una tabella in realtà non ha un concetto di messa a fuoco poiché non è un input stesso.

Quando i fuochi onBlur sugli ingressi contenute che controllerà la relatedTarget dell'evento onBlur che deve essere impostato con l'elemento che ha ricevuto attenzione (o null). Quindi usiamo una funzione che attraverserà verso l'alto attraverso parentNode da quel nuovo elemento focalizzato e assicuriamo che il nostro evento currentTarget (la tabella) non sia un antenato dell'elemento appena focalizzato. Se la condizione passa, si presume che la tabella non abbia più alcun focus.

const focusInCurrentTarget = ({ relatedTarget, currentTarget }) => { 
 
    if (relatedTarget === null) return false; 
 
    
 
    var node = relatedTarget.parentNode; 
 
     
 
    while (node !== null) { 
 
    if (node === currentTarget) return true; 
 
    node = node.parentNode; 
 
    } 
 

 
    return false; 
 
} 
 

 
const onBlur = (e) => { 
 
    if (!focusInCurrentTarget(e)) { 
 
    console.log('table blurred'); 
 
    } 
 
} 
 

 
const MyList = ({ items, onBlur }) => (
 
    <table onBlur={onBlur}> 
 
    <thead> 
 
     <tr> 
 
     <th>ID</th> 
 
     <th>Title</th> 
 
     <th>Publisher</th> 
 
     <th>Year</th> 
 
     <th>Author</th> 
 
     <th>System</th> 
 
     <th/> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td> 
 
      <input type="text" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" /> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
); 
 
    
 
ReactDOM.render(
 
    <MyList onBlur={onBlur} />, 
 
    document.getElementById('root') 
 
);

table { 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div> 
 
<br /> 
 
<input type="text" />

Riferimenti:

• http://www.w3schools.com/jsref/event_onblur.asp
• http://www.w3schools.com/jsref/event_currenttarget.asp
• http://www.w3schools.com/jsref/event_focus_relatedtarget.asp
• https://stackoverflow.com/a/2234986/2957138 (base per il nostro antenato-Checki Funzione ng)

AGGIORNAMENTO:

Eliminato l'uso di ReactDOM.findDOMNode

Answer 2

Senza funzioni personalizzate e Internet Explorer compatibile, dal momento che node.contains e document.activeElement sono supportati dal Internet Explorer 5, questo funziona:

const onBlur = (e) => { if (!e.currentTarget.contains(document.activeElement)) { console.log('table blurred'); } }

• I Node.contains() restituisce un valore booleano che indica se un nodo è un discendente di un dato nodo oppure no.
• Document.activeElement restituisce l'elemento attualmente focalizzato, ovvero l'elemento che otterrà eventi di battitura se l'utente ne scrive uno.