Styling Divs von Array onClick in React

Question

erstellt So habe ich ein Array wie dieses const divs = ["Text 1","Text 2","Text 3"]. Ich schaffe divs (ein kleines Menü) aus dieser Reihe in meiner Render-Funktion

var createThreeDivs = divs.map((category) => { 
     return <div key={category} onClick={this.handleClick} className="myDivClass">{category}</div> 
}); 

Ich mag eine dieser divs, um Stil, wenn ich auf sie klicken, und das Styling auf dem Rest von ihnen entfernen. Also, wenn ich eine der divs wählen wird es eine Farbe und entfernt die Farbe auf dem Rest von ihnen

Im normalen Javascript ohne virtuellen DOM i wie dies tun könnte:

handleClick(e) { 

    //remove styling from others 
    var allDivs = document.getElementsByClassName("myDivClass"); 
    for(var i = 0; i < allDivslength; i++) { 
     allDivs[i].classList.remove("myDivClass-styled"); 
    } 

    //Add styling class to selected, 
    e.target.classList.add("myDivClass-styled"); 

} 

Aber das DOM manipulieren direkt. Wie mache ich so etwas in React?

Ich habe Beispiele gesehen, wie dies mit einem Zustand mit nur einem Element und ohne ein Array, das die divs erstellt, gemacht werden kann. Aber ich kann keine gute Lösung für dieses Szenario finden. Irgendwelche Vorschläge?

Answer 1

Mithilfe des Status der Komponente können Sie die Farbe basierend auf dem aktiven div aktualisieren. Aktualisiere den Index des aktiven Bereichs, wenn der Benutzer klickt, und wenn der Index gleich dem Bereich ist, auf den geklickt wurde, aktualisiere die Farbe dieses Bereichs.

Siehe Beispiel unten.

class Example extends React.Component { 
 
    
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     active: 0 
 
    }; 
 

 
    } 
 
    
 
    render() { 
 
    
 
    const divs = ["Text 1", "Text 2", "Text 3"]; 
 
    
 
    const updateActiveDiv = (value) => { 
 

 
     this.setState(() => { 
 
      //this line will reset the value to 
 
      //null if same element is clicked twice 
 
      if(value === this.state.active) { 
 
      value = null; 
 
      }; 
 

 
      return { 
 
      active: value 
 
      } 
 
    
 
     }); 
 

 
    }; 
 
    
 
    let divText = divs.map((div, i) => { 
 

 
     let color = this.state.active === i ? 'red' : 'black'; 
 
     return <div style={{ color }} onClick={() => updateActiveDiv(i)}>{div}</div>; 
 
     
 
    }); 
 

 
    return (
 
     <div> 
 
     { divText } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
    
 
ReactDOM.render(<Example />, document.getElementById('root')); 
 

<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>

Answer 2

Pass current text from html 
handleClick = (text)=>{ 
this.setState({activeText:text}) 
} 

Inside create div function add class dynamically 

Div className = { stat condition ? Class : no class }