在 React 功能组件中使用 Cornerstone.js 中的堆栈滚动工具时，如何访问“currentImageIdIndex”？

我目前正在 React 组件中成功显示一堆图像，但不确定在哪里放置事件侦听器以便访问currentImageIdIndex滚动时。

import React, { useEffect, useRef, useCallback } from "react";
import cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import cornerstoneFileImageLoader from "cornerstone-file-image-loader";
import Hammer from "hammerjs";

function StackImageViewport(props) {
  const viewerRef = useRef(null);

  const base64StringToArrayBuffer = useCallback((base64) => {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
  }, []);

  const initializeCornerstone = () => {
    // Initialise cornerstone and link to DOM element
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneFileImageLoader.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.init();
    cornerstone.enable(viewerRef.current);
  };

  const setCornerstoneTools = () => {
    // define Cornerstone Tools
    const StackScrollTool = cornerstoneTools.StackScrollTool;
    const StackScrollMouseWheelTool =
      cornerstoneTools.StackScrollMouseWheelTool;
    const WindowingTool = cornerstoneTools.WwwcTool;

    // Add tools

    cornerstoneTools.addTool(StackScrollTool);
    cornerstoneTools.addTool(StackScrollMouseWheelTool);
    cornerstoneTools.addTool(WindowingTool);

    // set tools to Active state
    cornerstoneTools.setToolActive("StackScroll", { mouseButtonMask: 1 });
    cornerstoneTools.setToolActive("StackScrollMouseWheel", {});
    cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
  };

  const displayStack = (stackMediaArray) => {
    let mediaArray = [];


    // 'stackMediaArray' is an array of images, each containing a buffer of the image
    Promise.all(
      stackMediaArray.map((mediaObject) => {
        return new Promise((resolve, reject) => {
          let imageBuffer = base64StringToArrayBuffer(mediaObject.buffer);
          const imageId =
            cornerstoneFileImageLoader.fileManager.addBuffer(imageBuffer);
          mediaArray.push(imageId);

          resolve(mediaObject);
        }).catch(console.error);
      })
    );

    //define the stack
    const stack = {
      currentImageIdIndex: 0,
      imageIds: mediaArray,
    };

    // load images and set the stack
    cornerstone.loadAndCacheImage(mediaArray[0]).then((image) => {
      cornerstone.displayImage(viewerRef.current, image);
      cornerstoneTools.addStackStateManager(viewerRef.current, ["stack"]);
      cornerstoneTools.addToolState(viewerRef.current, "stack", stack);
    });

    setCornerstoneTools();
  };

  useEffect(() => {
    if (!viewerRef.current) {
      return;
    }
    initializeCornerstone();
    displayStack(props.stackMediaArray);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [viewerRef]);

  return (
    <>
      <div ref={viewerRef} id="viewer" className="flex h-1/2-screen"></div>
    </>
  );
}

export default StackImageViewport;

本文试图回答这个问题：

https://github.com/cornerstonejs/cornerstoneTools/issues/1121

但是，我不想访问 DOM 元素来添加事件侦听器。

同样清楚的是，可以在 Cornertsone.js 中访问事件：

https://github.com/cornerstonejs/cornerstoneTools/blob/master/src/events.js

...但我仍然不确定在哪里放置事件侦听器？

任何帮助将非常感激。

Thanks.

聆听事件中的事件ReactJS当使用像 CornerstoneJS 这样的新工具时，对于新手来说可能会更加困惑。但是，您可以使用以下方法创建事件侦听器window.addEventListener方法，就像你在普通 JavaScript。请注意，这可能会因浏览器环境和移动环境而异。而且，你的cornerstoneFileImageLoader也能成为一个挑战.

为此，您可以遵循以下结构：

window.addEventListener('keydown', (event) => {
    ...
});

但现在，我们需要了解将其放置在“哪里”。想象一下您的所有页面都只是组件，就像ReactJS is a 基于组件的系统。这意味着事件侦听器需要在组件内部发生。

例如，你可以这样做：

import React from 'react';

const App = (props) => {
  window.addEventListener('keydown', (event) => {
      ...
  });
  return (
    <div className='container'>
      <h1>Welcome to the Keydown Listening Component</h1>
    </div>
  );
};