Как применить эффект наведения на один компонент, присутствующий в строке таблицы реакции. Хотя есть несколько столбцов - PullRequest
Новая
       32

Как применить эффект наведения на один компонент, присутствующий в строке таблицы реакции. Хотя есть несколько столбцов

0 голосов
/ 15 мая 2019 
{
                id: "checkbox",
                accessor: "",
                Cell: ({ original }) => {
                  return (
                    <Checkbox
                      className="checkbox"
                      color={"#4caf50"}
                      onChange={() => this.toggleRow(original.id)}
                      checked={this.state.selected[original.id] === true}
                    />
                  );
                },
                Header: x => {
                  return (
                    <Checkbox
                      className="checkbox"
                      color={"#4caf50"}
                      onChange={() => this.toggleSelectAll()}
                      checked={this.state.selectAll === 1}
                    />
                  );
                },
                sortable: false,
                width: 45
              },

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

1 Ответ

0 голосов
/ 15 мая 2019

Я думаю, что практично использовать jQuery.Прежде всего, npm i jquery В импорте React добавьте import $ from 'jquery', а внутри функции componentDidMount() добавьте код, подобный следующему: когда мышь наведена на элемент столбца, добавьте к нему класс флажка.Когда закончите, удалите класс.Классы добавляются через $("#id").addClass("class-name") и удаляются с помощью $("#id").removeClass("class-name")

...