React フックを使うと、React の機能をクラスを書かずに使えるようになります。useState は再レンダーの間も React によって保持される state の値と、それを更新するための関数とをペアになっており、UIの変更や、変数として扱われたりします。この記事では、useStateの使用例をまとめています。
インクリメント
ボタンをクリックすると、カウンターの値が増えていく
import React, { useState } from "react";
function App() {
const [counter, setCounter] = useState(0);
let increment = () => {
setCounter(counter + 1);
}
return (
<div className="App">
{counter}
<button onClick={increment}>Increment</button>
</div>
);
}
export default App;
1: useState をインポート
3: state 変数の宣言、初期値に0を指定しています。
6, 11~12: ボタンをクリックでカウンターを増やします。
toggleスイッチ
メニューの非表示などに使えます。
import React, { useState } from "react";
function App() {
const [isOpen, setIsOpen] = useState(false);
let toggle = () => {
setIsOpen(!isOpen);
}
return (
<div className="App">
<p>menu is {isOpen ? "open" : "close"}</p>
<button onClick={toggle}>button</button>
</div>
);
}
export default App;
3: bool値をセット
6, 12: クリックで切り替えます。
フォーム
import React, { useState } from "react";
function App() {
const [inputValue, setInputValue] = useState("");
let text = (e) => {
setInputValue(e.target.value);
}
return (
<div className="App">
<input type="text" value={inputValue} onChange={text} />
</div>
);
}
export default App;
useState を使ったフォーム入力方法。
6, 11: フォームに入力する度に値を更新します。
submit ボタンをクリックした際に値を取得する useRef を使った方法を使用すると、無駄なレンダリング回数を減らすことができます。
オブジェクト
state にオブジェクトをセットして、複数のフォームを一纏めにすることができます。
import React, { useState } from "react";
function App() {
const [name, setName] = useState({
first: '',
last: '',
});
let MyName = (e) => {
setName((prev) => ({ ...prev, [e.target.name]: [e.target.value] }));
}
return (
<div className="App">
<input type="text" name="first" placeholder="first name" value={name.first} onChange={MyName} />
<input type="text" name="last" placeholder="last name" value={name.last} onChange={MyName} />
</div>
);
}
export default App;
以上です。
