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;