为什么此应用程序代码只能在右侧工作，否则 ReactDOM.findDOMNode querySelector 找不到类名

Question

我学习 Reactjs 和 Javascript 并且对这个小文件有疑问
Codesandbox 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;

为什么此应用程序代码只能在右侧工作，否则 ReactDOM.findDOMNode querySelector 找不到类名

Why is this app code only working from the right side or else the ReactDOM.findDOMNode querySelector cant find className

javascript

reactjs

react-dom