Question

如何设置按钮在点击后立即禁用的超时时间以避免人们注册两次？

目前我有以下功能：

timeout_init = () => {
     setTimeout("timeout_trigger()", 2000);
  };

<button
  className="button__submit"
  type="submit"
  onClick={this.timeout_init}
 >Submit
</button>

如何在其中添加禁用按钮？

谢谢

Answer 1

在 React 中，您应该使用 states 来跟踪是否应该禁用某些内容。

在下面的示例中，我使用 isDisabled 状态来禁用或启用按钮。每当点击按钮时，setIsDisabled 都会设置为 true，因此该按钮现在将被禁用。

我不知道为什么您需要 setTimeout，因为您声明“..在点击后立即被禁用..”。这就是这样做的。

const ExampleComponent = () => {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleClick = () => {
    setIsDisabled(true);
  };
  
  return (
    <button
      className="button__submit"
      type="submit"
      onClick={handleClick}
      disabled={isDisabled}
    >
      Submit
    </button>
  )
};

Answer 2

按钮的“禁用”状态就是……状态。您可以像跟踪任何其他状态一样对其进行跟踪，例如：

// using hooks
const [isDisabled, setIsDisabled] = useState(false);

// OR if you're using old class-based components
this.state = { isDisabled: false };

并在组件中使用：

<button
  className="button__submit"
  type="submit"
  onClick={this.timeout_init}
  disabled={isDisabled}
>
  Submit
</button>

您可以在点击处理程序中更新该状态：

// using hooks
timeout_init = () => {
  setIsDisabled(true);
  setTimeout(timeout_trigger, 2000);
};

// OR if you're using old class-based components
timeout_init = () => {
  this.setState({ isDisabled: true });
  setTimeout(this.timeout_trigger, 2000);
};

不清楚 timeout_trigger 是什么，但如果您想在那里重新启用按钮，那么您也可以在该功能中setIsDisabled(false)。

Answer 3

使用事件对象捕获按钮元素，然后在调用 setTimeOut(yourCb) 后禁用它：

const Btn = (props) => {
   const cb =() => {
    console.log("Testing the button")
  }
   const timeout_init = (e) => {
     setTimeout(cb, 2000);
     e.target.disabled = true
  }
  return (
  <button onClick={timeout_init}> Click to disable </button>
)
}

ReactDOM.render(<Btn/>,document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

Answer 4

在点击登录按钮时添加一个覆盖而不是禁用按钮。

如果请求失败，请移除覆盖层，以便用户可以在登录表单中更改用户名/密码。

我请求成功，用户将被重定向到新页面。

设置按钮超时 - 禁用登录

4 个答案: