时间戳

首页 > 解决方案 > 使用 React 突出显示垂直列

reactjs - 使用 React 突出显示垂直列

问题描述

我有以下 HTML-

<div class="hmap">
    <div class="Row" id="row1">
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
    </div>
    <div class="Row" id="row2">
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
    </div>
    <div class="Row" id="row3">
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
        <div class="Squares"></div>
    </div>
</div>

在悬停时，我试图使用 React 在每一行中垂直突出显示正方形。我尝试在 React 中使用 onmouseEnter 和 onmouseLeave。我能够添加一个类，但它被添加到所有“正方形”中。然而未能达到预期的效果。这可以在表格中轻松实现。但是，我不赞成使用表格。任何指针都会有所帮助。谢谢。

标签： reactjsonhover

解决方案

问题出在表的结构上。你必须找到一种方法来识别每一列，也许你可以试试这个：

<div class="Row" id="row1">
    <div id="column1" class="Squares"></div>
    <div id="column2" class="Squares"></div>
    <div id="column3" class="Squares"></div>
    <div id="column4" class="Squares"></div>
    <div id="column5" class="Squares"></div>
</div>

然后你添加一个逻辑，如果在column1上，对所有column1做一些事情

推荐阅读