如何显示 1 个具有附加到多个卡元素的处理程序事件的卡元素的悬停状态?

Question

我是 React 初学者，尝试使用卡片组件构建仪表板。我有一个渲染卡元素的 React 组件，对于每张卡，mouseenter和mouseleave都有相同的处理程序事件。预期的行为是查看鼠标悬停在一个小部件上时的:hover样式。但是，我似乎所有的小部件都具有:hover样式。如何更改代码，以便只有鼠标悬停在上面的代码显示悬停状态，而不是全部？

class Board extends Component {
constructor(props) {
super(props) {
this.showHoverBorder = this.showHoverBorder.bind(this);
this.hideHoverBorder = this.hideHoverBorder.bind(this);
this.state = {
isHoverStyleOn: false,
layouts: {
lg: [
{ i: "a", x: 0, y: 0, w: 1, h: 1 },
{ i: "b", x: 2, y: 0, w: 1, h: 1 },
{ i: "c", x: 2, y: 0, w: 1, h: 1 },
{ i: "d", x: 3, y: 0, w: 1, h: 1 },
{ i: "e", x: 0, y: 1, w: 1, h: 1 },
{ i: "f", x: 0, y: 1, w: 1, h: 1 } 
]}
}
showHoverBorder() {
this.setState({ isHoverStyleOn: true })
}
hideHoverBorder(hmm) {
this.setState({ isHoverStyleOn: false })
}
}
render() {        
let widget = "widget";
if(this.state.isHoverStyleOn) {
widget += ' widget-hover';
} else { widget = "widget"; }
return (
<div layouts={this.state.layouts}>
{this.state.layouts.lg.map((w) => ((
<div key={w.i} className={widget}>
<div className="widget-body">
<div className="widget-bar" onMouseEnter={this.showHoverBorder} onMouseLeave={this.hideHoverBorder}>
</div>
<div className="widget-graph"></div>
</div>
</div>
)))}
</div>
)
}
}
export default Board;

Answer 1

我建议您将单个项目提取到一个新类中，您可以在其中根据需要处理悬停状态，如下所示：

class App extends Component {
constructor(props) {
super(props);
this.state = {
isHoverStyleOn: false,
layouts: {
lg: [
{ i: "a", x: 0, y: 0, w: 1, h: 1 },
{ i: "b", x: 2, y: 0, w: 1, h: 1 },
{ i: "c", x: 2, y: 0, w: 1, h: 1 },
{ i: "d", x: 3, y: 0, w: 1, h: 1 },
{ i: "e", x: 0, y: 1, w: 1, h: 1 },
{ i: "f", x: 0, y: 1, w: 1, h: 1 }
]
}
};
}
render() {
return (
<div layouts={this.state.layouts}>
{this.state.layouts.lg.map(w => (
<Item w={w} />
))}
</div>
);
}
}

提取的项组件

class Item extends Component {
state = {
active: false
};
hover = () => {
this.setState({
active: !this.state.active
});
};
render() {
const { w } = this.props;
const { active } = this.state;
return (
<div key={w.i} className={!active ? "widget" : "widget widget-hover"}>
<div className="widget-body">
<div
className="widget-bar"
onMouseEnter={() => this.hover()}
onMouseLeave={() => this.hover()}
>
<h1>test</h1>
</div>
<div className="widget-graph" />
</div>
</div>
);
}
}