8.3. Button
必须对于包含接口请求状态
的按钮,必须把 loading
状态传递给 Button
组件,以便于在请求过程中禁用按钮。
设置 C7N 组件库的按钮的 loading
方式常见有以下两种:
- 通过
Button
组件的loading
属性设置 - 通过
Button
组件的onClick
属性设置,且onClick
返回一个Promise
对象。若Promise
对象处于pending
状态,则按钮就处于loading
状态。
例:
function App() {
const handleClick = React.useCallback(() => {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 2000);
});
}, []);
return (
<Button onClick={handleClick}>
Click Me
</Button>
);
}