Antd 按钮加载状态下的点击事件与焦点问题

{"title":"Antd 按钮加载状态下的点击事件与焦点问题","description":"本文探讨了 Antd 按钮在使用 loading 属性时的点击事件与焦点问题。解释了 loading 属性只改变样式不影响交互行为，并提供代码示例说明如何在按钮点击后添加加载状态且不失去焦点。","keywords":"antd, 按钮, loading, 点击事件, 焦点, 失去焦点, 代码示例, react","content":"使用 loading 属性时，Antd 按钮的点击事件不会导致按钮失去焦点。这是因为 loading 属性只是改变了按钮的样式，而不影响按钮的交互行为。\n\n以下是一个示例代码：\n\njsx\nimport { Button } from 'antd';\nimport { useState } from 'react';\n\nfunction App() {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n // 模拟异步操作\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n return (\n <Button type="primary" loading={loading} onClick={handleClick}>\n Click Me\n </Button>\n );\n}\n\nexport default App;\n\n\n在上述代码中，通过在按钮上设置 loading 属性来实现按钮点击后的加载效果。当按钮被点击时，loading 被设置为 true，按钮会显示加载状态，点击事件将会触发异步操作。当异步操作完成时，loading 被设置为 false，按钮恢复到正常状态。无论按钮是否处于加载状态，点击事件都不会导致按钮失去焦点。"}