Reactjs Geschwister Klasse Toggle

Question

Ich möchte nicht zwei Klassen verwenden

Wie kann ich die Geschwister Feld grün angezeigt werden, wenn Taste schweben ist?

Derzeit sind alle Felder grün hinterlegt.

Unten ist der Code mit dem Schnipsel.

Vielen Dank für die Hilfe im Voraus.

class Lol extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
     green : false 
 
    }; 
 
    } 
 
    render =() =>{ 
 
    let green = (this.state.green) ? 'green' : ''; 
 
    let outs = []; 
 
    for(let i=0;i<5;i++){ 
 
     outs.push( 
 
     <div> 
 
      <button onMouseOver={() => { 
 
       this.setState({green : true}); 
 
      }} 
 
      onMouseLeave={() => { 
 
       this.setState({green : false}); 
 
      }} 
 
      > 
 
      Turn box green 
 
     </button> 
 
     <div className={'box '+green}> 
 
     </div> 
 
     </div> 
 
     ); 
 
    } 
 
    return (
 
     <div> 
 
     {outs} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<Lol />,document.getElementById("a"));

.box{ 
 
    border:1px solid #000; 
 
    height:20px; 
 
    width:20px; 
 
} 
 
.green{ 
 
    background:green; 
 
}

<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="a"> 
 
    </div>

Answer 1

den Index des hovered Artikel in Zustand setzen, sowie ob etwas schwebte wird. Dann vergleichen Sie die gespeicherten Index mit der aktuellen Iteration Index:

class Lol extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
     greenIndex: null 
 
    }; 
 
    } 
 
    render =() =>{ 
 
    
 
    let outs = []; 
 
    for(let i=0;i<5;i++){ 
 
     const { greenIndex } = this.state; 
 
     const greenClass = (greenIndex === i) ? 'green' : ''; 
 

 
     outs.push( 
 
     <div> 
 
      <button onMouseOver={() => { 
 
       this.setState({ greenIndex: i }); 
 
      }} 
 
      onMouseLeave={() => { 
 
       this.setState({ greenIndex: null }); 
 
      }} 
 
      > 
 
      Turn box green 
 
     </button> 
 
     <div className={'box '+greenClass}> 
 
     </div> 
 
     </div> 
 
     ); 
 
    } 
 
    return (
 
     <div> 
 
     {outs} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<Lol />,document.getElementById("a"));

.box{ 
 
    border:1px solid #000; 
 
    height:20px; 
 
    width:20px; 
 
} 
 
.green{ 
 
    background:green; 
 
}

<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="a"> 
 
    </div>