Question

我正在做反应，我有这里的图标，我需要让这个图标成为悬停状态，就像在CSS中一样但是我需要在反应应用程序中执行此操作，这是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';

var FontIcon = React.createClass({

getInitialState: () => {
    return {
        hover: false,
    };
},

render(){

    var _props = this.props,
    iconStyle = {
        'font-size': _props.size,
        cursor: "default"
    }

    function hoverOn(){
        this.setState({
            hover: true
        });
    }

    function hoverOff(){
        this.setState({
            hover: false
        });
    }

    if (this.state.hover) {
        iconStyle.color = _props.hoverColor;
    } else {
        iconStyle.color = _props.color;
    }

    return(
            <i className="material-icons" style={iconStyle} onmouseenter={this.hoverOn} onmouseleave={this.hoverOff} >{_props.className}</i>
    );
}
});

ReactDOM.render(
    <FontIcon className="account_circle" size="100" color="blue" hoverColor="red" />,
    document.getElementById('app')
);

我不知道出了什么问题：/感谢您的帮助

Answer 1

首先，不要在render（）中使用setState！
之后，请注意React事件都是用CamelCase编写的，因为这只是javascript。尝试这样的事情：

var FontIcon = React.createClass({

    getInitialState() {
        return {
            hover: false,
        };
    },
    hoverOff() {
        this.setState({
            hover: false
        });
    },
    hoverOn() {
        this.setState({
            hover: true
        });
    },
    render() {
        var _props = this.props;
        var iconStyle = {
            'font-size': _props.size,
            cursor: "default"
        };

        if (this.state.hover) {
            iconStyle.color = _props.hoverColor;
        } else {
            iconStyle.color = _props.color;
        }

        return(
            <i className="material-icons" 
               style={iconStyle} 
               onMouseEnter={this.hoverOn} 
               onMouseLeave={this.hoverOff} >
                {_props.className}
            </i>
        );
    }
});

Answer 2

不要在render内声明功能。 Render函数经常被调用，因此，每次浏览器都会创建新函数并从内存中删除旧函数。
您需要使用onMouseEnter和onMouseLeave属性：https://facebook.github.io/react/docs/events.html#mouse-events

所以，结果代码：

import React from 'react';
import ReactDOM from 'react-dom';

var FontIcon = React.createClass({

getInitialState: () => {
    return {
        hover: false,
    };
},

hoverOn() {
   this.setState({
       hover: true
   });
},

hoverOff() {
   this.setState({
       hover: false
   });
},

render() {
    var _props = this.props,
    iconStyle = {
        'font-size': _props.size,
        cursor: "default"
    }

    if (this.state.hover) {
        iconStyle.color = _props.hoverColor;
    } else {
        iconStyle.color = _props.color;
    }

    return(
            <i className="material-icons" 
               style={iconStyle} 
               onMouseEnter={this.hoverOn} 
               onMouseLeave={this.hoverOff}>           
                    {_props.className}
            </i>
    );
}
});

ReactDOM.render(
    <FontIcon className="account_circle" size="100" color="blue" hoverColor="red" />,
    document.getElementById('app')
);

Reactjs，我的剧本有些不对劲，但我不知道是什么

2 个答案: