reactjs - 无法在 KeyDown 上调用 useCallback 函数

Question

            <span
              key="next"
              aria-label={"Next"}
              // ref={NextPageButtonRef}
              onClick={changeHandler(!hasNext, page + 1)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                    changeHandler(!hasNext, page + 1);
                }
              }
              tabIndex={0}
            >
              <span>Next</span>
            </span>

 const changeHandler = useCallback(
    (exitEarly: boolean, target: number) => () => {
      if (target === page || exitEarly) {
        return;
      }

      onPageChange(clamp(target, 1, count as number));
    },
    [onPageChange, page, count]
  );

实际上我想在按下 Enter 时调用“changeHandler”

当我像这样直接调用它时它就起作用了

onKeyDown = {changeHandler(!hasNext, page + 1)}

但我希望它仅在按下 Enter 时调用

Answer 1

您的useCallback有一个返回函数的函数。因此，当在 onKeyDown 处理程序中调用 changeHandler 时，它不会执行您进行检查并触发 onPageChange

的函数

您可以通过删除额外的功能来解决这个问题

const changeHandler = useCallback(
    (exitEarly: boolean, target: number) => {
        if (target === page || exitEarly) {
            return;
        }

        onPageChange(clamp(target, 1, count as number));
    },
    [onPageChange, page, count],
);

然后 onClick 需要有一个匿名函数，因为 changeHandler 不再返回它将立即调用的函数。

<span
  key="next"
  aria-label={"Next"}
  // ref={NextPageButtonRef}
  onClick={() => changeHandler(!hasNext, page + 1)}
  onKeyDown={(e) => {
    if (e.key === "Enter") {
        changeHandler(!hasNext, page + 1);
    }
  }
  tabIndex={0}
>
  <span>Next</span>
</span>