防止在 React 中连续单击按钮答案

【问题标题】：prevent a button being clicked consecutively in React防止在 React 中连续单击按钮
【发布时间】：2020-09-09 06:30:51
【问题描述】：

我试图防止在我的项目中连续单击一个按钮，并且只允许单击一次。如果可能的话，我还希望它只是单击而不允许双击？

为此，我想在再次按下按钮之前添加大约 5 秒的时间，但我不知道该怎么做。该按钮是将用户重定向回主页的链接。

是否有一种方法可以在单击时在计时器上设置按钮？

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

有什么想法吗？干杯回复

【问题讨论】：

标签： reactjs button react-bootstrap

【解决方案1】：

基本上，您需要使用带有计时器的禁用状态。

检查此代码笔：https://codepen.io/hasanagh/pen/MWaLxVK

  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>
    );
  }

另外，如果这与某个事件相关，那么不知道为什么需要 5 秒才能更好地绑定到事件而不是时间。

【讨论】：

【解决方案2】：

制作按钮组件可能是最可重用的。您可以处理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}
  delay={5000}
  id="back-btn"
  variant="link"
  className="btn btn-link"
  onClick={() => console.log('click!')}
  alt="homepage"
/>

目前它将按钮的disabled 属性设置为true，但如果您不想要视觉效果，只需从组件中删除disabled={isDisabled}。

【讨论】：