如何修改React-slick中点击切换点（dots）的默认行为？

解决这个问题的核心是阻止react-slick默认的dot点击事件冒泡，同时在自定义点击逻辑里执行通知操作。具体实现如下：

实现代码示例 #

import Slider from "react-slick";

const CustomDotSlider = () => {
  const sliderSettings = {
    dots: true,
    // 自定义每个切换点的渲染
    customPaging: (index) => (
      <div
        onClick={(e) => {
          // 阻止事件冒泡，切断react-slick的默认切换逻辑
          e.stopPropagation();
          // 执行你的通知逻辑，这里用alert示例，可替换为自定义弹窗/Toast
          alert(`点击了第 ${index + 1} 个切换点`);
        }}
        style={{
          width: "12px",
          height: "12px",
          borderRadius: "50%",
          backgroundColor: "#999",
          margin: "0 6px",
          cursor: "pointer",
          transition: "background-color 0.2s"
        }}
      />
    ),
    // 自定义切换点容器样式
    appendDots: (dots) => (
      <div style={{ marginTop: "15px" }}>
        <ul style={{ listStyle: "none", padding: 0, display: "flex", justifyContent: "center" }}>
          {dots}
        </ul>
      </div>
    )
  };

  return (
    <Slider {...sliderSettings}>
      <div style={{ height: "250px", background: "#ff4444", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "20px" }}>
        幻灯片 1
      </div>
      <div style={{ height: "250px", background: "#44ff44", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "20px" }}>
        幻灯片 2
      </div>
      <div style={{ height: "250px", background: "#4444ff", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "20px" }}>
        幻灯片 3
      </div>
    </Slider>
  );
};

export default CustomDotSlider;

关键说明 #

• e.stopPropagation()是核心：react-slick的默认切换事件绑定在dot的父级元素上，通过阻止事件向上冒泡，就能避免触发默认的幻灯片切换行为。
• 自定义onClick里可以自由实现通知逻辑，比如弹出自定义模态框、Toast提示等，替换示例中的alert即可。
• 样式部分可以根据项目需求完全自定义，不影响功能逻辑。

内容的提问来源于stack exchange，提问作者Lenur