antd Carousel dots点击事件

Antd Carousel 组件的 dots（小圆点）是一个预设的 UI 元素，它们默认情况下不支持点击事件。但是你可以通过自定义 dots 元素来实现点击事件。以下是一种实现方式：

1. 首先，你需要使用 `renderDots` 属性自定义 dots 元素。在这个函数中，你可以创建一个新的 dots 元素，并为每个小圆点添加点击事件处理程序。

import { Carousel } from 'antd';

function onClickDot(index) {
  console.log(`Clicked dot ${index}`);
}

function renderDots(currentIndex, allPages) {
  const dots = [];
  for (let i = 0; i < allPages; i++) {
    dots.push(
      <span
        key={i}
        className={currentIndex === i ? "active" : ""}
        onClick={() => onClickDot(i)}
      />
    );
  }
  return <div className="custom-dots">{dots}</div>;
}

function MyCarousel() {
  return (
    <Carousel renderDots={renderDots}>
      <div>
        <h3>Slide 1</h3>
      </div>
      <div>
        <h3>Slide 2</h3>
      </div>
      <div>
        <h3>Slide 3</h3>
      </div>
    </Carousel>
  );
}

2. 在 `onClickDot` 函数中，你可以处理小圆点的点击事件。例如，你可以将当前选中的小圆点高亮显示，并在控制台中打印出选中的索引。

3. 最后，你需要在 CSS 样式中定义 `custom-dots` 类，以覆盖默认的 dots 样式，并为选中的小圆点添加一个 `active` 类。

.custom-dots {
  margin-top: 10px;
  text-align: center;
}

.custom-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #e8e8e8;
  cursor: pointer;
}

.custom-dots span.active {
  background-color: #1890ff;
}

这样，你就可以在 Antd Carousel 组件中实现自定义 dots 元素，并添加点击事件处理程序。