Tabs, wenn gesetzt, um aktiv alle falsch zu schalten alogrithim Meteor React

Question

Ich versuche zu: Machen Sie eine Registerkarte aktiv sein und deaktivieren Sie alle anderen. Momentan funktioniert es nur dort, wo es nacheinander ausgeschaltet wird.

Ich versuche herauszufinden, wie ich das machen kann. Ich dachte, gibt es eine Möglichkeit, die übergeordnete Komponente an die Funktion übergeben und dann in der Lage sein, auf die ClassName-Eigenschaft aller seiner Kinder zuzugreifen ?? Zur Zeit habe ich:

import React from 'react'; 
import ReactDOM from 'react-dom'; 


export default class TestContainer extends React.Component{ 


     setActive(event){ 
      event.preventDefault(); 

      //getting id from component 
      let isActive = event.target.id; 


      if(event.currentTarget.className === "list-group-item text-center active"){ 
        event.currentTarget.className = "list-group-item text-center"; 
      } else if(event.currentTarget.className === "list-group-item text-center") { 
        event.currentTarget.className = "list-group-item text-center active"; 
      } 

     } 



     render(){ 




     return (        

       <div className="col-lg-6 col-md-6 col-sm-6 col-xs-6 bhoechie-tab-container scroll-y"> 
         <div className="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu"> 
           <div className="list-group"> 
             <a href="#" onClick={this.setActive} id="eyes" className="list-group-item text-center active"> 
               <h4 className="glyphicon glyphicon-eye-close"></h4><br/>1 
             </a> 
             <a href="#" onClick={this.setActive} id="hair" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-tint"></h4><br/>2 
             </a> 
             <a href="#" onClick={this.setActive} id="mouth" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-minus"></h4><br/>3 
             </a> 
             <a href="#" onClick={this.setActive} id="clothing" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-user"></h4><br/>4 
             </a> 
             <a href="#" onClick={this.setActive} id="props" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-gift"></h4><br/>5 
             </a> 
           </div> 
         </div> 
)} 

Answer 1

Durch den Versuch, den Zustand Ihrer Elemente außerhalb des render() Methode zu ändern, Sie kämpfen gegen den Stärken der Rendering-Engine des React. Verwenden Sie den Status entweder intern zur Komponente oder über Requisiten/Kontext (vorzugsweise Requisiten), um zu bestimmen, welche Registerkarte in ihrem Klassennamen mit active gerendert werden soll.

Wenn Sie auf einen Klick reagieren, ändern Sie den Status und lassen Sie React die Komponente basierend auf dem neuen Status erneut rendern.

Für das hier angegebene Beispiel würde ich empfehlen, die ID des aktiven Elements intern im Status der Komponente zu speichern.

export default class TestContainer extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     activeTab: this.props.activeTab || 'eyes' 
    }; 
    } 

    setActive(event) { 
    this.setState({ activeTab: event.target.id }); 
    } 

    render() { 
    const { activeTab } = this.state; 
    const tabClassName = "list-group-item text-center"; 
    const eyesTabClassName = tabClassName + (activeTab === 'eyes' ? ' active' : ''); 

    ... 

       <a href="#" onClick={this.setActive} id="eyes" className={eyesTabClassName}> 

    ... 

    } 
} 

Dies ist eine grobe, nicht optimierte Lösung, aber es sollte die Idee zu vermitteln. Wenn Sie this.setState aufrufen, reagiert React, indem die Komponente so gekennzeichnet wird, dass sie erneut gerendert werden muss. Die Methode render() wird automatisch aufgerufen und somit werden alle Ihre JSX neu ausgewertet und neu gerendert. Reaction wird dann den Unterschied zwischen dem, was gerade produziert wurde, und dem, was bereits im virtuellen DOM vorhanden ist, betrachten und Ihre Änderungen zusammenführen.

Dies bedeutet, dass die Registerkarte, die zuvor in ihrem Klassennamen mit "aktiv" gerendert wurde, erneut gerendert wird. Wenn es nicht mehr aktiv ist, hat der Render-Code die aktive Klasse nicht in den Klassennamen dieser Registerkarte verkettet. Außerdem wird für jede Klasse, die aktiv ist, der className mit "active" angehängt.

TL; DR

Sie das DOM in Ihrem Event-Handler nicht manipulieren. Manipulieren Sie den Status und lassen Sie React seine Magie wirken, indem Sie mit Ihrem neuen Status neu rendern.