React 用户点击某个元素后只执行一次操作

Baoing_2024-08-10 9:57

React开发中经常会遇到需求：用户点击某个元素后只执行一次特定操作。比如，用户点击按钮后弹出提示框，但希望再次点击按钮不再触发提示框。针对这种需求，可以封装一个自定义Hooks来实现只允许点击一次的功能。

jsx 复制代码

import {useCallback, useState} from 'react';

const useOnceClick = (onClick: (event?: any) => void) => {
  const [hasClicked, setHasClicked] = useState(false);

  return useCallback((event: any) => {
    if (!hasClicked) {
      onClick(event);
      setHasClicked(true);
    }
  }, [hasClicked, onClick]);
};

export default useOnceClick;

上面的代码展示了名为useOnceClick的自定义Hooks。它接受一个函数作为参数，在点击事件发生时调用该函数。Hooks内部使用了useState来追踪是否已经点击过，并使用useCallback确保返回的回调函数在依赖没有变化时不会重新创建。

使用这个自定义Hooks非常简单，只需要在函数组件中调用它并传入需要执行的点击事件处理函数即可。例如：

jsx 复制代码

import React from 'react';
import useOnceClick from './useOnceClick';

const App = () => {
  const handleClickOnce = useOnceClick(() => {
    alert('只能点击一次哦！');
  });

  return (
    <button onClick={handleClickOnce}>点击我</button>
  );
};

export default App;

在上面的例子中，当用户点击按钮时，弹出的提示框只会出现一次。再次点击按钮时，并不会再次触发弹框。

通过这个简单的自定义Hooks，我们可以轻松实现只允许点击一次的功能，提升用户体验和交互效果。