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

发布时间：2020-12-15 20:10:57 所属栏目：百科来源：网络整理

导读：所有：我想知道我是否使用无状态组件,如何处理鼠标事件以更改组件样式,例如： const Com = (props) = { var hltStyle = false; function highlight(){ // I do not know what put here } var hltStyle = { backgroundColor: !hltStyle?"lightgreen": "tomat

所有：

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

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

谢谢

解决方法

你可以用这样的东西来实现

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!