thumbnail点击事件的antd旋转木马

Question

嗨，我所有我都关注 code> code

    const App = () => {
      const mediaRef = useRef(null);
      const navRef = useRef(null);
      const [direction, setDirection] = useState(null);

      const onChange = (currentSlide) => {
        if (direction === "next") {
          mediaRef.current.goTo(currentSlide + 1, false);
        } else {
          mediaRef.current.goTo(currentSlide - 1, false);
        }
      };

      const handleNext = () => {
        setDirection("next");
        navRef.current.next();
      };

      const handlePrev = () => {
        setDirection("prev");
        navRef.current.prev();
      };

      const imageList = [ some images array ];
     return (
        <>
          <>
            <Carousel
              asNavFor={navRef.current}
              ref={mediaRef}
           >
              {imageList?.map((el, id) => (
                <ImageWrapper key={id}>
                  <img src={el} alt={"name"} />
                </ImageWrapper>
              ))}
            </Carousel>
            {imageList?.length > 1 && (
              <>
                <Button onClick={handlePrev}>
                  <LeftOutlined />
                </Button>
                <Button onClick={handleNext}>
                  <RightOutlined />
               </Button>
              </>
            )}
          </>

          {imageList?.length > 1 && (
            <Carousel
              slidesToShow={3}
              centerMode={true}
              asNavFor={mediaRef.current}
              ref={(carousel) => (navRef.current = carousel)}
              beforeChange={onChange}
            >
              {imageList?.map((el, id) => (
                <>
                  <divkey={id}>
                    <img src={el} alt={"name"} />
                  </div>
                </>
              ))}
            </Carousel>
          )}

          <>
            <Button onClick={handlePrev}>
              <LeftOutlined />
            </Button>
            <Button onClick={handleNext}>
              <RightOutlined />
            </Button>
          </>
        </>
      );
    };

我正在做以下，我正在服用antd旋转木马，添加另一个用于缩略图并放置自定义箭头的轮播，单击下一个和上一个按钮，它会自动更改主图像和缩略图。

现在，我试图将OnClick事件放在缩略图上，我的意思是应该单击缩略图，然后单击，应更改大图像和缩略图。我该如何实现？

Answer 1

您可以在缩略图上使用单击ID作为参数添加一个点击处理程序，

           <ThumbnailWrapper key={id}>
            <img
              src={el}
              alt={"name"}
              onClick={() => thumbnailClicked(id)}
            />
          </ThumbnailWrapper>

然后使用定义函数中的ID进行操作：

const thumbnailClicked = (id) => {
    console.log("thumbnail clicked:",id);
    //then e.g. set parent the same as the thumbnail.
    mediaRef.current.goTo(id, false);
  };