防止在React中连续单击按钮

Question

我正在尝试防止在项目中连续单击按钮，而只允许单击一次（因此，不允许双击或让用户多次使用单击）。我还想添加一个可能需要5秒钟的时间，然后才能再次按下该按钮，但是我不确定该怎么做？该按钮本身只是将用户重定向回首页。

<Button id="back-btn" variant="link" className="btn btn-link" onClick={props.goBack} alt="homepage">
Homepage
</Button>

有什么想法吗？干杯R

Answer 1

可能最可重复使用以制作按钮组件。您可以处理onClick事件以设置disabled状态，然后启动计时器将其设置回false。示例：

const DebouncedButton = ({ as = button, delay, onClick, ...props }) => {
  const [isDisabled, setDisabled] = useState(false);

  useEffect(() => {
    if (!isDisabled) {
      // timeout elapsed, nothing to do
      return;
    }

    // isDisabled was changed to true, set back to false after `delay`
    const handle = setTimeout(() => {
      setDisabled(false);
    }, delay);
    return () => clearTimeout(handle);
  }, [isDisabled, delay]);

  const handleClick = (e) => {
    if (isDisabled) {
      return;
    }

    setDisabled(true);
    return onClick(e);
  };

  const Component = as;
  return <Component {...props} disabled={isDisabled} onClick={handleClick} />;
};

您会像使用按钮一样使用此组件，不同之处在于，您将一个delay传递给它，该时间为毫秒数，应在单击后将其禁用。 as属性可让您传递用于按钮本身的组件，默认为<button>。

<DebouncedButton
  as={Button}
  id="back-btn"
  variant="link"
  className="btn btn-link"
  onClick={() => console.log('click!')}
  alt="homepage"
/>

当前，它将按钮的disabled属性设置为true，但是如果您不希望看到图像，只需从组件中删除disabled={isDisabled}。