Reactjs 防止在React中连续单击按钮

我试图阻止在我的项目中连续单击按钮，并且只允许单击一次。我也希望它只是一个单一的点击，不允许双击，如果这是可能的

要做到这一点，我想在再次按下按钮之前增加一个5秒的时间，但我不知道如何做到这一点。该按钮是将用户重定向回主页的链接

这是一种在单击计时器时设置按钮的方法吗

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

有什么想法吗？ 干杯

---

R

制作按钮组件可能是最可重用的。您可以处理onClick事件以设置禁用状态，然后启动计时器将其设置回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} />;
};

---

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

基本上，您需要使用一个带有计时器的disabled状态

检查此代码笔：

此外，如果这与某个事件有关，则不确定为什么需要5秒，最好绑定到事件而不是时间

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

  state = {
    disabled: false,
  };

  handleButtonClicked = () => {
    //going back logic
    this.setState({
      disabled: true,
    });
    setTimeout(() => {
        this.setState(() => ({
          disabled: false,
        }));
      }, 5000);
  };

  render() {
    const { disabled } = this.state;
    return (
      <button   
        onClick={this.handleButtonClicked}
        disabled={disabled}
      >
        Button to be disabled
      </button>
    );
  }