useCounter

カウンターの状態を管理します。

インポート#


import { useCounter } from 'primereact/hooks';

基本#

increment、decrement、reset関数を備えたシンプルなカウンターです。


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