Подсветка вертикальной колонки с помощью React - PullRequest
Новая
       34

Подсветка вертикальной колонки с помощью React

0 голосов
/ 18 декабря 2018

У меня есть следующий 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.Я попытался использовать onmouseEnter & onmouseLeave в React.Я смог добавить класс, но он был добавлен ко всем «квадратам».Однако не смог добиться желаемого результата.Это может быть легко достигнуто в таблицах.Однако я не одобряю использование таблиц.Любые указатели будут полезны.Спасибо.

1 Ответ

0 голосов
/ 18 декабря 2018

проблема исходит из структуры вашего стола.Вы должны найти способ идентифицировать каждый столбец, может быть, вы могли бы попробовать это: 

<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>

Затем вы добавляете логику, если в столбце 1 сделаете что-то для всех столбцов 1

...