javascript - react-selecto - 无法从照片库中拖动和选择

Question

我正在使用 react-photo-gallery 并寻找一种通过拖动框来选择照片的简单方法。Selecto 在 react 组件上工作，图库中的照片不是组件吗？还有什么我做错了吗？

提前致谢！

function GetPhotos() {
    const [selectAll, setSelectAll] = useState(false);

const toggleSelectAll = () => {
    setSelectAll(!selectAll);
};

const [selectImages, setSelectImages] = useState(false);

const imageRenderer = useCallback(
    ({ index, left, top, key, photo }) => (
      <SelectedImage
        selected={selectAll ? true : false}
        key={key}
        margin={"2px"}
        index={index}
        photo={photo}
        left={left}
        top={top}
      />
    ),
    [selectAll]
  );
const BasicRows = () => <Gallery photos={getSavedPhotos()} renderImage={imageRenderer} onClick={handleClick} />;
return (
    <div className={"container"}>
        <Selecto
            container={document.body}
            dragContainer={"gallery"}
            selectableTargets={["container", "gallery"]}
            selectByClick={true}
            selectFromInside={true}
            continueSelect={false}
            toggleContinueSelect={"shift"}
            keyContainer={window}
            hitRate={100}
            onSelect={e => {
                e.added.forEach(el => {
                    el.classList.add("selected");
                });
                e.removed.forEach(el => {
                    el.classList.remove("selected");
                });
        }}
        />
        <div className={"gallery"}>
            <BasicRows />
        </div>

    </div>
);

}

标签： javascriptreactjs