ReactJS:创建鼠标悬停事件时出现的重复项

Question

我正在尝试在我的反应项目中创建卡片。我当前的项目 问题是我已经创建了重用同一类的 React 组件，当我实现 mouseOver 事件以在类之间切换以实现过渡效果时，该效果将应用于共享同一 CSS 类的所有类。我怎样才能避免这种情况？ 我相信标签导致了我的问题，如何在代码中没有太多冗余的情况下拆分功能？

请注意，我是初学者。

import React,{Component} from 'react';
import './OneHome.css'
import OneCard from './OneCard.js'
class OneHome extends Component{
constructor(props){
super(props);
this.someHandler = this.someHandler.bind(this);
this.someOtherHandler = this.someOtherHandler.bind(this);
this.state={
buttonStyleClass:"CardButton",
};
}
someOtherHandler() {
this.setState({buttonStyleClass : "CardButton"});
}
someHandler() {
this.setState({buttonStyleClass : "CardButtonHover"});
}
render(){
return (
<div className ="FlexContainer">
<OneCard >
<h1 className="CardTitle"> Part One </h1>
<div className="CardSeparator"> </div>
<button className={this.state.buttonStyleClass} onMouseEnter={this.someHandler} onMouseLeave={this.someOtherHandler}> Click Here</button>
</OneCard>
<OneCard > 
<h1 className="CardTitle"> Part One </h1>
<div className="CardSeparator"> </div>
<button className={this.state.buttonStyleClass} onMouseEnter={this.someHandler} onMouseLeave={this.someOtherHandler}> Click Here</button>
</OneCard>
<OneCard > </OneCard>
<OneCard > </OneCard>
<OneCard > 
<h1 className="CardTitle"> Part One </h1>
<div className="CardSeparator"> </div>
<button className={this.state.buttonStyleClass} onMouseEnter={this.someHandler} onMouseLeave={this.someOtherHandler}> Click Here</button>
</OneCard>
</div>
);
}
}
export default OneHome;

Answer 1

代码中没有用于设置当前悬停元素的标识。在悬停时someHandler中，您可以传递索引或引用或某种关键字来标识当前悬停的卡片。然后，您可以执行三元检查以追加类。您可以直接追加/删除类名，而不是将类名保留在状态中，如下所示。

import React,{Component} from 'react';
import './OneHome.css'
import OneCard from './OneCard.js';
class OneHome extends Component{
constructor(props){
super(props);
this.someHandler = this.someHandler.bind(this);
this.someOtherHandler = this.someOtherHandler.bind(this);
this.state = {
activeCard: 0
};
}
someOtherHandler() {
this.setState({
activeCard: 0
});
}
someHandler(activeCardIndex) {
this.setState({
activeCard: activeCardIndex
});
}
render(){
return (
<div className ="FlexContainer">
<OneCard>
<h1 className="CardTitle"> Part One </h1>
<div className="CardSeparator"> </div>
<button className={this.state.activeCard === 1 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(1)} onMouseLeave={this.someOtherHandler}> Click Here</button>
</OneCard>
<OneCard > 
<h1 className="CardTitle"> Part One </h1>
<div className="CardSeparator"> </div>
<button className={this.state.activeCard === 2 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(2)} onMouseLeave={this.someOtherHandler}> Click Here</button>
</OneCard>
<OneCard > </OneCard>
<OneCard > </OneCard>
<OneCard > 
<h1 className="CardTitle"> Part One </h1>
<div className="CardSeparator"> </div>
<button className={this.state.activeCard === 3 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(3)} onMouseLeave={this.someOtherHandler}> Click Here</button>
</OneCard>
</div>
);
}
}
export default OneHome;