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

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开发人员工具中的模拟电话中测试组件时，我可以刷新，但是敲击其中一个链接似乎只能在索引0上登录链接，而有时1，而不管有时1我按哪个链接。当我不将触摸事件道具传递给ul链接工作正常时，我认为问题与触摸事件有关。

Answer 1

我让它起作用。在Swipe中，我从当前变换百分比中减去X中的更改。我不知道为什么修复了它。