为什么这个应用程序代码只能在右侧工作，否则 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 {

    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;