當鼠標位於 React 中的元素上時如何檢測 Ctrl 鍵按下

Question

我有一個簡單的網格，可以拖放項目。 我想要做的是當鼠標位於可拖動圖標上時，當用戶按下 Ctrl 鍵時能夠檢測到它和 console.log(true)。 由於某種原因，我的嘗試目前沒有按預期工作，console.log 僅在第一次按下 CTRL 時檢測到，如果鼠標 cursor 在可拖動圖標上時按下 Ctrl，我如何才能成功跟蹤？ 這是我的代碼：

import React, { useState, useEffect } from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { DragAndDrop } from '@progress/kendo-react-common';
import { DraggableRow } from './draggable-row';
import { Checkbox } from '@progress/kendo-react-inputs';
import { DragHandleCell } from './drag-handle-cell';
import products from './products.json';
import {
  groupBy,
  GroupDescriptor,
  GroupResult,
} from '@progress/kendo-data-query';
import { groupBy } from '@progress/kendo-data-query';

export const ReorderContext = React.createContext({
  reorder: () => {},
  dragStart: () => {},
});

const App = () => {
  const [gridData, setGridData] = React.useState(products);
  const [activeItem, setActiveItem] = React.useState(null);
  const [ctrlOn, setCtrl] = useState(false);

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      e.preventDefault();
      if ((e.metaKey || e.ctrlKey) && e.code === 'KeyC') {
        setCtrl(true);
      }
    });
    console.log(ctrlOn);
  });

  const highlightCol = (e) => {
    if (e.ctrlOn) {
      console.log('');
    }
  };
  const reorder = (dataItem, direction) => {
    if (activeItem === dataItem) {
      return;
    }

    console.log(activeItem);

    let reorderedData = gridData.slice();
    let prevIndex = reorderedData.findIndex((p) => p === activeItem);
    let nextIndex = reorderedData.findIndex((p) => p === dataItem);
    reorderedData.splice(prevIndex, 1);
    reorderedData.splice(
      Math.max(nextIndex + (direction === 'before' ? -1 : 0), 0),
      0,
      activeItem || reorderedData[0]
    );
    setGridData(reorderedData);

    console.log(activeItem);
  };

  const dragStart = (dataItem) => {
    setActiveItem(dataItem);
  };

  return (
    <ReorderContext.Provider
      value={{
        reorder: reorder,
        dragStart: dragStart,
      }}
    >
      <DragAndDrop>
        <Grid
          style={{
            height: '400px',
          }}
          data={gridData}
          dataItemKey={'ProductID'}
          rowRender={(row, rowProps) => (
            <DraggableRow elementProps={row.props} {...rowProps} />
          )}
        >
          <Column
            title=""
            width="80px"
            cell={DragHandleCell}
            onClick={highlightCol}
          />
          {/* <Column title="" width="80px" cell={CustomCell} /> */}
          <Column field="ProductID" title="ID" width="60px" />
          <Column field="ProductName" title="Name" width="250px" />
          <Column field="Category.CategoryName" title="CategoryName" />
          <Column field="UnitPrice" title="Price" width="80px" />
          <Column field="UnitsInStock" title="In stock" width="80px" />
        </Grid>
      </DragAndDrop>
    </ReorderContext.Provider>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

這是一個可重現的例子：

https://stackblitz.com/edit/react-cv2hnu-lj18m8?file=app/main.jsx

Answer 1

這是因為你的 useEffect 只運行一次（沒有依賴數組）因此你只控制台登錄一次。 將控制台日志放在事件監聽器中

像這樣修改：

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      e.preventDefault();
      if (e.ctrlKey) {
        console.log('CTRL - highlight row');
      }
    });
  });

還有很多事情要處理，例如：您應該將懸停的可拖動行存儲在 state（使用 onMouseEnter / onMouseLeave）中，如果該 state 中有一個元素，則意味着用戶將鼠標懸停在可拖動的 -> 中這種情況下 ctrl 應該突出顯示。

我希望我能幫上忙