【React + TypeScript】useState を利用してリアルタイムに入力値を反映させる
useState を利用してリアルタイムに入力値を反映させるメモ
useState を使用する
React の useState を使用する。
ステートフックの利用法 - React
onChangeイベントを使用して値を設定する
Onchange のイベントを使用して変更時に値を設定します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import React, { useState } from "react";
const App = () => {
// useState
const [input, setInput] = useState<string>();
// onChange Event
const changeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
setInput(event.target.value);
};
return (
<div>
<p>Input</p>
<input name="input" type="text" value={input} onChange={changeInput} />
<br />
<p>{input}</p>
</div>
);
};
export default App;
|
直接値を設定する
onChangeイベントから直接 setInputを呼び値を設定します。
関数化しないのでこちらの方が簡略化はできます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import React, { useState } from "react";
const App = () => {
// useState
const [input, setInput] = useState<string>();
return (
<div>
<p>Input</p>
<input
name="input"
type="text"
value={input}
onChange={(event) => setInput(event.currentTarget.value)}
/>
<br />
<p>{input}</p>
</div>
);
};
export default App;
|
参考
ステートフックの利用法 - React
