useCounter

管理计数器状态。

导入#


import { useCounter } from 'primereact/hooks';

基本用法#

带有递增，递减和重置功能的简单计数器。


<span className="font-bold text-4xl mb-5">{count}</span>
<div className="flex flex-wrap gap-3">
    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
</div>

选项#

使用 step 选项指定更改计数器的步长因子。此外，可以使用 min 和 max 选项定义边界。


<span className="font-bold text-4xl mb-5">{count}</span>
<div className="flex flex-wrap gap-3">
    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
</div>