TA貢獻1852條經驗 獲得超1個贊
當 時handleMouseLeave，事件目標將是子組件，如 (p, h2, h3,...)。所以，ReactDOM.findDOMNode(e.target).querySelector找不到外在的喜歡.box-content。
我建議使用簡單的解決方案useState。
import React from "react";
import axios from "axios";
class App extends React.Component {
state = {
posts: [],
hoverIndex: null,
};
componentDidMount() {
axios
.get(`https://jsonplaceholder.typicode.com/posts`)
.then((res) => {
this.setState({ posts: res.data });
})
.then((error) => {
console.log(error);
});
}
handleMouseEnter = (e) => {
if (e.target.id !== null) {
this.setState({hoverIndex: e.target.id});
}
};
handleMouseLeave = (e) => {
this.setState({hoverIndex: null});
};
render() {
const { posts } = this.state;
return (
<div>
{posts.map((e, index) => (
<div
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
className={"box-container"}
id={index}
key={e.id}
>
<h3>HOVER ME</h3>
<div
className={"box-content " + (this.state.hoverIndex === index.toString() ? 'hovered' : "")}
>
<h2>{e.title}</h2>
<p>{e.body}</p>
</div>
</div>
))}
</div>
);
}
}
export default App;
舉報