javascript - react 悬停以显示图像。悬停不起作用

Question

仍在尝试学习 React。我试图在您悬停时显示图像。这是我的 Item 组件。

import React from 'react';


import Eyecon from '../../static/eye.svg';


class Item extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Item';
        this.state = {
            hover: false
        };
    }
    mouseOver() {
        this.setState({hover: true});
    }
    mouseOut() {
        this.setState({hover: false});
    }
    render() {
      const { item, i } = this.props;
        return (
            <div className="grid-box" onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
            {this.state.hover ? (<img src={Eyecon}/>) : null}       
            </div>
        )
    }
}


export default Item;

我如何才能只将鼠标悬停在其上的项目显示图像？

Answer 1

这只是一个“this”绑定(bind)问题。将 console.log 放入 mouseOver 和 mouseOut 方法中，您会发现状态没有改变。

有很多方法可以在类方法中绑定(bind)“this”上下文。我将在本例中向您展示三种方法(不要执行所有三种方法，只需选择一种)。

import React from 'react';
import Eyecon from '../../static/eye.svg';

class Item extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Item';
        // 1. bind your functions in the constructor.
        this.mouseOver = this.mouseOver.bind(this);
        this.mouseOut = this.mouseOut.bind(this);
        this.state = {
            hover: false
        };
    }

    // 2. bind it with fat arrows.
    mouseOver = () => {
        this.setState({hover: true});
    }
    mouseOut() {
        this.setState({hover: false});
    }
    render() {
      const { item, i } = this.props;
        // 3. bind them in the render method (not recommended for performance reasons)
        return (
            <div className="grid-box" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)}>
            {this.state.hover ? (<img src={Eyecon}/>) : null}       
            </div>
        )
    }
}


export default Item;

以下是使用 ES6 类在 React 中绑定(bind)“this”上下文的不同方法的说明: http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html