Reagieren Sie den Mauszeiger über die Taste, damit sich eine andere Taste über der Tastatur befindet

Question

Entschuldigen Sie den Titel, ich konnte mir nicht vorstellen, wie ich dies kurz und bündig formulieren soll.

Also habe ich eine Gruppe von Tasten als Teil einer Reaktion Komponente bekommt:

export default class AdvancedSearch extends React.Component{ 

    hover(){ 

    } 

    render(){ 
      return(
       <div className="btn-group"> 
        <button id="star1" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button> 
        <button id="star2" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button> 
        <button id="star3" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button> 
        <button id="star4" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button> 
        <button id="star5" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button> 
       </div> 
      ); 
    } 

Was ich passieren soll, wenn ich über eine Schaltfläche bewegen, alle Tasten links von ihm ihren Hintergrund hat sich ändern, als ob sie auch darüber schwebten. Ich habe keine Ahnung, was ich in die Hover-Funktion setzen kann, um dies zu erreichen, oder ob das der beste Weg ist, dies zu tun. Was wäre der beste Weg, um diesen Effekt zu erzielen? Außerdem möchte ich das gleiche tun können, wenn auch auf eine Schaltfläche geklickt wird.

Answer 1

Verwenden Sie den Komponentenstatus und die CSS-Klassen.

export default class AdvancedSearch extends React.Component{ 

getInitialState() { 
    return { 
     hoveredIndex: -1 
    }; 
} 

hover(index){ 
    this.setState({ 
     hoveredIndex: index 
    }); 
} 

leave() { 
    this.setState({ 
     hoveredIndex: -1 
    }); 
} 

render(){ 
    var buttons = []; 

    for (var i = 0; i < 5; i++) { 
     let className = 'glyphicon'; 
     if (i <= this.state.hoveredIndex) 
      className += ' glyphicon-star'; 
     else 
      className += ' glyphicon-star-empty'; 

     buttons.push(
      <button id={'star'+(i+1)} type="button" className="btn btn-default" onMouseEnter={this.hover.bind(this, i)} onMouseLeave={this.leave}><span className={className}></span></button> 
     ); 
    } 

     return(
      <div className="btn-group"> 
       {buttons} 
      </div> 
     ); 
} 

Sie sollten in der Lage sein, sich für die Click-Ereignisse oder jede andere Form der Transformation von dem inspirieren;)