React slick 和 React router Link 不区分单击和拖动答案

【问题标题】：React slick and React router Link doesn't distinguish click and dragReact slick 和 React router Link 不区分单击和拖动
【发布时间】：2020-11-19 23:19:15
【问题描述】：

我正在尝试使用react-router-dom 将我的滑动滑块链接到关于页面。问题是它不区分拖动和点击。我将如何做到这一点，有没有办法用反应路由器来做到这一点，或者我需要用我自己的代码添加一个 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;

【问题讨论】：

标签： javascript reactjs react-router-dom react-slick

【解决方案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>
);
}

【讨论】：

【解决方案2】：

我通过删除 Link 并改为使用 JavaScript 链接来修复它。它检查开始光标位置和结束光标位置以查看它是否被拖动或单击。

        let mousePosStart; 
        let mousePosEnd; 
        const mouseDownDetect = (e) => {
            mousePosStart = e.pageX;
        }
        const mouseUpDetect = (e) => {
            mousePosEnd = e.pageX;
        }
        const compareMouse = () => {
            console.log(`start: ${mousePosStart}   end: ${mousePosEnd}`);
            let diffrence = mousePosStart - mousePosEnd;
            if (diffrence === 0) {
                window.location.href = `./about`;
            }
        }

【讨论】：