Question

所有

我想知道我是否使用无状态组件，如何处理鼠标事件以更改组件样式，例如：

const Com = (props) => {
    var hltStyle = false;
    function highlight(){
        // I do not know what put here
    }

    var hltStyle = {
        backgroundColor: !hltStyle?"lightgreen": "tomato"
    }

    return (
        <div style={hltStyle} onMouseOver={ highlight } >HOVER ME</div>
    )
}

我想要的只是悬停此组件并更改背景颜色。内部突出显示其他一些逻辑，这就是为什么我不能简单地使用CSS

由于

Answer 1

你可以使用类似的东西来实现这个目标

const Com = () => {
        function over(e){
                e.target.style.backgroundColor="red";
        }
        function out(e){
                e.target.style.backgroundColor='';
        }
        return <div onMouseOver={over} onMouseOut={out}>HOVER ME </div>;
}

无论如何，如果你觉得你需要声明一些变量来将它们用作状态，你应该使用普通组件而不是无状态组件。

jsfiddle

如何在React中处理无状态组件中的鼠标事件

1 个答案: