【React + TypeScript】イベントから型を指定して渡す方法
Material UI を使用している際 onChange イベント時にせっかく TypeScript を使用しているのに unknown の型指定しか出来なかったため、対策時のメモ
環境
- React 5.0.0
- TypeScript 4.5.5
- Material UI 4.12.4
onChangeイベントから受け取る（失敗例
Material UIのページの通りにすると value: unknown と型指定ができません。
React Select component - Material UI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| import { FormControl, InputLabel, MenuItem, Select } from "@material-ui/core";
import React from "react";
const App = () => {
const [age, setAge] = React.useState("");
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setAge(event.target.value as string);
};
return (
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
);
};
export default App;
|
型を指定して渡す（成功例
onChange={(e) => handleChange(e.target.value as string)} と変更して handleChange 実行前に string型とすることで unknown を避けることができます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| import { FormControl, InputLabel, MenuItem, Select } from "@material-ui/core";
import React from "react";
const App = () => {
const [age, setAge] = React.useState("");
const handleChange = (value: string) => {
setAge(value);
};
return (
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={(e) => handleChange(e.target.value as string)}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
);
};
export default App;
|
参考
