反應盤旋在按鈕上導致另一個按鈕被懸停

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

您應該能夠從爲點擊事件或轉化的任何其他形式的激勵自己;）