<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键时调用

推荐答案

你的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>

Reactjs相关问答推荐

在Reaction中单击时,按钮未按预期工作

根据另一个Select中的选定值更改Select中的值

react 路由GUGUD Use Effect无法通过useNavigate正常工作

如何使数据库数据在第一次呈现时显示?

禁止直接访问Next.js中的页面,同时允许从应用程序内部访问

GitHub页面未正确显示Reaction应用程序网站

React组件未出现

关于forwardRef,我可以';我不理解第二个用例

如何获取用户在 GooglePlacesAutocomplete 中输入的文本?

从 MongoDB createAt 字段中分割精确时间

如何更新 FunctionComponentElement 的 props

在react的useEffect钩子中,我的函数被调用,但只有第一个函数能够改变状态,第二个函数无法改变状态.

React - 如何重定向页面以显示数据修改?

在 Nextjs13 应用程序目录中呈现从 supabase 获取的数据

Redux Toolkit 配置,是否适用于全栈应用程序?

我如何在所有组件中使用 Chakra UI toast?

我在使用 Elements of stripe 时使用 React router v6

单击当前子div时如何更改p标签的图像和样式?react

如何防止 mui x-date-picker 被截断?

如何在按钮左下角制作 Material UI 菜单下拉菜单