反应触摸容器中的可点击元素

Question

我正在尝试设置一个带有可点击元素的可滑动容器。该组件如下：

const SectionBar = (): JSX.Element => {
  const [translatePercent, setTranslatePercent] = useState(0);
  const [x0, setX0] = useState(0);
  const [isMediumOrLarger, setIsMediumOrLarger] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia("(min-width: 768px)");
    setIsMediumOrLarger(mediaQuery.matches);
    mediaQuery.addEventListener("change", (event) =>
      setIsMediumOrLarger(event.matches)
    );
  }, []);

  const setSnapPercent = (index: number) => {
    console.log(index);
    if (index === 3) {
      setTranslatePercent(index * 10 + 6);
    } else if (index >= 4) {
      setTranslatePercent((index + 1) * 10);
    } else {
      setTranslatePercent(index * 10);
    }
  };

  const swipe: TouchEventHandler<HTMLUListElement> = (
    event: TouchEvent<HTMLUListElement>
  ) => {
    const dx = -(event.changedTouches[0].clientX - x0) / 5;

    const percent = Math.max(0, Math.min(dx, MAX_PERCENT));
    setTranslatePercent(percent);
  };

  return (
    <nav className={classes["section-bar"]}>
      <ul
        className={classes["section-list"]}
        style={
          isMediumOrLarger
            ? {}
            : {
                transform: `translateX(-${translatePercent}%)`,
              }
        }
        onTouchStart={(event) => setX0(event.changedTouches[0].clientX)}
        onTouchEnd={swipe}
        onTouchMove={swipe}
      >
        {Object.entries(createSections).map(([key, value], index) => (
          <li key={key}>
            <Link href={`/create/race#`}>
              <a className={classes.link} onClick={() => setSnapPercent(index)}>
                {value}
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

当我尝试在 Chrome 开发人员工具中的模拟 phone 中测试组件时，我可以很好地滑动，但点击其中一个 link 似乎只能注册单击索引 0 处的 links，有时单击 1，无论我按哪个 link。当我不将触摸事件道具传递给 ul 时，link 工作得很好，所以我认为问题与触摸事件有关。

Answer 1

我成功了。在 swipe 中，我从当前变换百分比中减去 x 的变化。我不知道为什么修复它。

反应触摸容器中的可点击元素

React clickable elements in touch container

touch

touch-event

reactjs