如何在 React Material UI 中检测可扩展表格行组的悬停状态

如何解决如何在 React Material UI 中检测可扩展表格行组的悬停状态

我想根据表格行的悬停状态显示/隐藏编辑按钮。所以我使用 this website 中的 useHover 钩子，它的实现是这样的：

function useHover() {
  const [value,setValue] = useState(false);
  const ref = useRef(null);
  const handleMouSEOver = () => setValue(true);
  const handleMouSEOut = () => setValue(false);
  useEffect(
    () => {
      const node = ref.current;
      if (node) {
        node.addEventListener("mouSEOver",handleMouSEOver);
        node.addEventListener("mouSEOut",handleMouSEOut);
        return () => {
          node.removeEventListener("mouSEOver",handleMouSEOver);
          node.removeEventListener("mouSEOut",handleMouSEOut);
        };
      }
    },[ref.current] // Recall only if ref changes
  );
  return [ref,value];
}

所以目前我的组件结构大致是这样的（仅遵循their docs中的示例）：

function Row(props) {
  const [hoverRef,isHovered] = useHover();
  return (
    <>
      {/* attach the hoverRef in this TableRow */}
      <TableRow ref={hoverRef}>
        <TableCell>Simplified Info here</TableCell>

        {/* I want this Edit button only displayed when someone hover the row and its 'child' grouP*/}
        <div className={clsx(!isHovered && { visibility: "hidden" })}>
          <IconButton>
            <EditIcon />
          </IconButton>
        </div>
      </TableRow>

      {props.details.map((detail) => (
        <TableRow>
          <TableCell>
            <Collapse>
              <Text>Detailed information Here</Text>
              
              {/* I also want to display this if the parent is hovered or this cell is hovered */}
              <div className={clsx(!isHovered && { visibility: "hidden" })}>
                <IconButton>
                  <EditIcon />
                </IconButton>
              </div>
            </Collapse>
          </TableCell>
        </TableRow>
      ))}
    </>
  );
}

它不像我期望的那样完全工作（在悬停时显示编辑按钮），因为它仅在用户将鼠标悬停在 <TableRow>Simplified Info</TableRow> 行上时才显示编辑按钮。我想要做的是让两个编辑按钮也显示为 2 种情况：

1. 用户鼠标悬停在“父”行
2. 用户鼠标悬停在其“子”行之一

因此，我通过将 <TableRow> 包裹在 div 中并将悬停引用附加到 div 中来更改结构，如下所示：

function Row() {
  const [hoverRef,isHovered] = useHover();
  return (
    <>
      {/* Now adding div and attach the hoverRef into this div */}
      <div ref={hoverRef}>
        <TableRow ref={hoverRef}>
          <TableCell>Simplified Info here</TableCell>

          {/* Now this edit button also displayed even if the mouse is on top of its children*/}
          <div className={clsx(!isHovered && { visibility: "hidden" })}>
            <IconButton>
              <EditIcon />
            </IconButton>
          </div>
        </TableRow>

        {props.details.map((detail) => (
          <TableRow>
            <TableCell>
              <Collapse>
                <Text>Detailed information Here</Text>

                {/* This button also displayed even if the mouse is hovering its parent */}
                <div className={clsx(!isHovered && { visibility: "hidden" })}>
                  <IconButton>
                    <EditIcon />
                  </IconButton>
                </div>
              </Collapse>
            </TableCell>
          </TableRow>
        ))}
      </div>
    </>
  );
}

是的，它有效，但它打破了风格。

以下是一些插图，可以帮助您了解我想要实现的目标（应突出显示行组并应显示编辑按钮）：

所以问题是：关于如何在不破坏样式的情况下“聆听”父级及其子级/兄弟级的悬停状态有什么建议吗？