设置按钮超时-禁用登录

Question

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

目前我有一个函数如下:

timeout_init = () => {
setTimeout("timeout_trigger()", 2000);
};
<button
className="button__submit"
type="submit"
onClick={this.timeout_init}
>Submit
</button>

我如何添加一个禁用按钮?

感谢

Answer 1

<disabled"按钮的状态就是…状态。您可以像跟踪其他状态一样跟踪它，例如:>

// 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 2

在React中，你应该使用状态来跟踪是否应该禁用某些内容。

在下面的例子中，我使用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 3

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

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

如果请求成功，无论如何用户将被重定向到新的页面。

Answer 4

使用事件对象捕获按钮元素，然后在调用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>