在鼠标控制/输入的react表中的列中显示图标

Question

使用反应表。希望在鼠标输入/退出的单一列中显示/隐藏图标。通过css更改行背景是nbd，但还没有找到改变行鼠标上方单个单元格css的诀窍。

想知道是否有一个简单的方法，然后我开始旋转一个州网，以推动信号。

Answer 1

FWIW：

1. 在列描述符中：

Cell: ({row}) =>  <div className={`${rootClass}__table-icon`} row-key={row.id}}><SVGItem/></div>

1. 确保已定义了onMouseEnter和onMouseLeave
2. 加：

function rowMouseEnter(row:any) {
    document.querySelector("[row-key='" + row.id + "']").className = `${rootClass}__table-icon-selected`
}

function rowMouseLeave(row:any) {
    document.querySelector("[row-key='" + row.id + "']").className = `${rootClass}__table-icon`
}

1. 在css中添加

&__table-icon-selected: visibility: visible

和

&__table-icon: visibility: none