ボタンの上にリアボーバーを置くと、別のボタンが表示される

Question

タイトルが残念ですが、これを簡単に言葉で表現する方法は考えられませんでした。

だから私が反応成分の一部として、ボタンのグループを持っている：私は起こるしたい何

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> 
      ); 
    } 

は私がボタンにカーソルを合わせると、その左側にすべてのボタンが自分のバックグラウンドを持っています同じように変更されているかのように変更します。私はこれを実現させるために、ホバリング機能の中に何を入れることができないのか、それがこれを行う最善の方法であるかどうかはわかりません。この効果を得るための最良の方法は何でしょうか？また、ボタンをクリックしても同じことができるようにしたいと考えています。

Answer 1

コンポーネントの状態とCSSクラスを使用します。

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> 
     ); 
} 

あなたはクリックイベントまたは変換の他のフォームのためのものから自分を鼓舞することができるはずです;）