如何在 React 的無狀態組件中處理鼠標事件

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

Answer 2

將經典 CSS 用於簡單的懸停效果怎么樣？

    <div class="el-to-hover"></div>

    //somewhere in css-file:

    .el-t-hover {
       background: transparent
       transition: background .3s ease-in-out;
    }
    .el-to-hover:hover {
       background: red
    }

完畢