Reactでのステートを用いたカウンター
ボタンをクリックした回数を数えるカウンターを作ってみましょう:
function App() {
const [count, setCount] = useState(0);
function clickHandler() {
setCount(count + 1);
}
return <div>
<span>{count}</span>
<button onClick={clickHandler}>+</button>
</div>;
}
ハンドラー関数を匿名のアロー関数に置き換えることもできます:
function App() {
const [count, setCount] = useState(0);
return <div>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>+</button>
</div>;
}
ステートに数値を保持します。 この数値を段落に表示してください。 ボタンを2つ作成します。最初のボタンは 数値を1増やし、 2番目のボタンは1減らすようにします。
