javascript - React slick 和 React router Link 不区分单击和拖动

Question

我正在尝试使用 react-router-dom 将我的光滑 slider 幻灯片链接到关于页面.问题是它不区分拖动和点击。我将如何做到这一点，有没有办法用 react 路由器来做到这一点，或者我需要用我自己的代码添加一个 JavaScript 解决方案吗？这是我的代码:

import React from "react";
import Slider from "react-slick";
import { Link } from "react-router-dom";
import "../node_modules/slick-carousel/slick/slick.css";
import "../node_modules/slick-carousel/slick/slick-theme.css";
import "./App.css";

class Movies extends React.Component {
  constructor() {
    super();
  }
  render() {
    const settings = {
      dots: false,
      infinite: false,
      speed: 500,
      slidesToShow: 5,
      slidesToScroll: 3,
      arrows: false,
      responsive: [
        {
          breakpoint: 1000,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
          },
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          },
        },
      ],
    };
    return (
      <div className="App">
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>1</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>2</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>3</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>4</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>5</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>6</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>7</h3>
              </div>
            </Link>
          </div>
        </Slider>
      </div>
    );
  }
}

export default Movies;

Answer 1

这可以通过简单的内置鼠标事件来实现。下面给出了一个最小的例子。

import React, { useState } from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import { useHistory } from "react-router-dom";
import Link from "@material-ui/core/Link";

export default function Card() {
const history = useHistory();
const [mouseMoved, setMouseMoved] = useState(false);
// console.log(r)
const handleClick = () => {
    if (!mouseMoved) {
    history.push("/");
    }
};

return (
    <Card className={classes.root}>
    <CardHeader />
    <Link
        onMouseMove={() => setMouseMoved(true)}
        onMouseDown={() => setMouseMoved(false)}
        onMouseUp={() => handleClick()}
        style={{ textDecoration: "none", cursor: "pointer" }}
    >
        <CardMedia image="" title="">
        {" "}
        </CardMedia>
    </Link>
    </Card>
);
}