javascript - 为什么这个应用程序代码只能从右侧工作，否则 ReactDOM.findDOMNode querySelector 找不到 className

Question

我学习了 Reactjs 和 Javascript 并对这个小文件有疑问
代码沙盒 Hover effect REACT (forked) .
当鼠标移到带有文本的覆盖层中时，该应用程序正在滑动，当鼠标离开时覆盖层隐藏。
为什么只有当鼠标从右侧进入和存在时才经常工作？试试看你会发现有点奇怪..
我看到这个错误:

我检查了 DOM 并且有一个正确的 className我想可能是我使用了一些错误的版本导入，还是时间问题？
我做了一个 movie clips

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 {
    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;