抱歉,我不知道如何简洁地表达这个标题。
所以我有一组按钮作为 React 组件的一部分:
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>
);
}
我想要发生的是,当我将鼠标悬停在按钮上时,该按钮左侧的所有按钮的背景都会发生变化,就像它们也被悬停在上面一样。我不知道我可以在悬停函数中放入什么来实现这一点,或者这是否是实现此目的的最佳方法。获得这种效果的最佳方法是什么?另外,我希望在单击按钮时也能够执行相同的操作。
最佳答案
使用组件状态和 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>
);
}
您应该能够从中获得点击事件或任何其他形式的转换的启发;)
关于javascript - react 悬停在按钮上会导致另一个按钮悬停在上面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36439862/