ステートフック - becolomochi’s memo

ステートフック

state ... コンポーネントで変化する値を扱うときにつかう

コンポーネントの内部で使う

使用例

カウントするなら

const [count, setCount] = useState(0);

名前を設定するなら

const [name, setName] = useState('');

state変数名は自由に設定できる。

useStateの引数には初期値を設定する。

1つ目の変数が状態変数、2つ目が関数で状態変数を更新する役割

countやnameが状態変数。setCountやsetNameが状態変数を更新する関数

呼び出し例

関数の外

<p>You clicked {this.state.count} times</p>

関数の中

<p>You clicked {count} times</p>

stateの更新

関数の外

code:jsx

<button onClick={() => this.setState({ count: this.state.count + 1 })}>

Click me

</button>

this.setState() を呼び出すことで更新できる

関数の中

code:jsx

<button onClick={() => setCount(count + 1)}>

Click me

</button>

関数内ではすでに setCount と count を受け取っているので this は不要

code:jsx

<input type="text" onChange={(e) => {setName(e.target.value);}} />

関数内ではすでに setName を受け取っているので this は不要

操作する系の関数名： handleHogehoge みたいな名前が一般的みたい

handleChange

handleCreate

handleDelete

handleInput