为什么这个应用程序代码只能在右侧工作，否则 ReactDOM.findDOMNode

Question

我学习 Reactjs 和 Javascript 并且对这个小文件
Codesandbox Hover effect REACT (forked)有疑问。
当鼠标移到应用程序上方时，该应用程序会在带有文本的叠加层中滑动，而当鼠标离开时，叠加层会隐藏。

为什么只有当鼠标从右侧进入和存在时才经常起作用？试试看你会发现有点奇怪..

我看到这个错误：

我检查了 DOM，className我认为这是正确的，所以也许是我使用了一些错误的版本导入组合，或者这是一个时间问题？

我做了一个电影剪辑

Answer 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 {&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; &nbsp; posts: [],&nbsp; &nbsp; &nbsp; &nbsp; hoverIndex: null,&nbsp; &nbsp; };&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .get(`https://jsonplaceholder.typicode.com/posts`)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ posts: res.data });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((error) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; handleMouseEnter = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; if (e.target.id !== null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({hoverIndex: e.target.id});&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; handleMouseLeave = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({hoverIndex: null});&nbsp; &nbsp; };&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const { posts } = this.state;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {posts.map((e, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onMouseEnter={this.handleMouseEnter}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onMouseLeave={this.handleMouseLeave}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={"box-container"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={e.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>HOVER ME</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={"box-content " + (this.state.hoverIndex === index.toString() ? 'hovered' : "")}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>{e.title}</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{e.body}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}export default App;