React Strippen Onclick

Question

Ich habe die folgende Reaktion Komponente:

class PlayerRow extends Component { 
    activateKey(){ 
     $(this).addClass('active') 
} 
render() { 

    return (
       <div className="row-par"> 
        <div className="details-cont"> 
        </div> 
        <div className="key-cont"> 
         <div onClick={this.activateKey} className="key"></div> 
         <div onClick={this.activateKey} className="key"></div> 
         <div onClick={this.activateKey} className="key"></div> 
        </div> 
       </div> 
     ) 

} 
} 

Ich versuche, die Funktion activatekey auf Klick auf der verschachtelten divs durchzuführen, aber wenn ich die App machen aus meinem Onclick-Attribut wird gezupft von allen divs. Warum sollte das sein?

Answer 1

React bindet Ereignis-Listener selbst, so dass onClick nicht direkt zum onclick-Attribut in DOM führt. Ihr Code funktioniert jedoch (siehe Snippet). obwohl

class PlayerRow extends React.Component { 
 
    activateKey() { 
 
     console.log('ddd') 
 
} 
 
render() { 
 

 
    return (
 
       <div className="row-par"> 
 
        <div className="details-cont"> 
 
        </div> 
 
        <div className="key-cont"> 
 
         <div onClick={this.activateKey} className="key">asd</div> 
 
         <div onClick={this.activateKey} className="key">qwe</div> 
 
         <div onClick={this.activateKey} className="key">zxc</div> 
 
        </div> 
 
       </div> 
 
     ) 
 

 
} 
 
} 
 

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

<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="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

Ich schlage vor, zwei Dinge, verwenden .bind(this) für Action-Handler oder noch besser, mit dem Pfeil Funktion als es Anwendungsbereich standardmäßig erbt.

Von reagieren docs:

handleClick =() => { 
    console.log('this is:', this); 
} 

siehe: https://facebook.github.io/react/docs/handling-events.html

zweite Sache - nicht jQuery verwenden. Sie verwenden React, um DOM zu verwalten, und jQuery erzeugt standardmäßig Nebeneffekte, die die Reaktion beeinträchtigen. React rendert die Ansicht entsprechend dem Status oder den Requisiten der Komponente automatisch, mit ihren Optimierungen, die großartig sind, und jQuery bearbeitet weder Requisiten noch Status, so dass Sie die coolen Sachen der Reaktion nicht nutzen.

Für was Sie erreichen möchten, könnten Sie Ihrem Action-Handler einen Parameter geben, der Ihnen sagt, welcher Block geklickt wurde onClick={() => activateKey(1)}. Im Handler speichern Sie die aktive ID im lokalen Status und geben Sie Ihren Blöcken die Klasse bedingt, abhängig davon, ob ihre ID mit der Schlüssel-ID übereinstimmt. Das ist meine Idee.

Answer 2

Die Verwendung der ES6-Pfeilfunktion oder .bind() in der Rendermethode fügt Ihren Komponenten unnötigen Overhead hinzu. .bind (this) wirklich sollten Sie auf Ihre Methoden im Konstruktor wie solche:

import React, { Component } from "react"; 

export default class Demo extends Component { 
    constructor(props) { 
     super(props); 

     this.activateKey = this.activateKey.bind(this); 
    } 

    activateKey() { 
     console.log("ddd"); 
    } 

    render() { 

     return (
      <div className="row-par"> 
       <div className="details-cont"></div> 
       <div className="key-cont"> 
        <div onClick={this.activateKey} className="key">asd</div> 
        <div onClick={this.activateKey} className="key">qwe</div> 
        <div onClick={this.activateKey} className="key">zxc</div> 
        </div> 
       </div> 
     ); 
    } 
} 

Wenn Sie dies tun, wird die Bindeoperation nur einmal pro Methode während der Klasse Initialisierungsphase durchgeführt. Wenn Sie in Ihrer Rendermethode ES6-Pfeilfunktionen oder .bind (this usw.) verwenden, wird die Bindung von jedem Element mit einem onClick-Ereignis bei jedem erneuten Rendern ausgeführt.

Die einzige Zeit, die Sie verwenden sollten .bind (diese, etc ..) oder eine ES6-Pfeil-Funktion innerhalb der Rendermethode ist, wenn Sie etwas anderes als ein Klickereignis an eine Funktion übergeben müssen.