toB向けのサービスや管理画面のように情報量の多いのプロダクトを作っていると、FormをまとめたComponentを作りたくなるケースがある。
単体で使っているときにはそこまで問題ないが、それを複数リスト上に管理して増減させたいときにonChangeをどうやって設計するのかを色々考えたのでまとめておく。
以下のようなFormを題材にしてみる。
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
interface HumanFormValue {
firstName: string;
lastName: string;
}
interface HumanFormProps {
defaultValue: HumanFormValue;
onChange: (value: HumanFormValue) => void;
}
const HumanForm: React.FC<HumanFormProps> = ({ defaultValue, onChange }) => {
const [value, setValue] = React.useState<HumanFormValue>(defaultValue);
React.useEffect(() => {
onChange(value);
}, [value, onChange]);
const handleChangeFirstName = React.useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const firstName = e.target.value;
setValue(value => ({
...value,
firstName: typeof firstName === "string" ? firstName : ""
}));
},
[]
);
const handleChangeLastName = React.useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const lastName = e.target.value;
setValue(value => ({
...value,
lastName: typeof lastName === "string" ? lastName : ""
}));
},
[]
);
return (
<div>
<div>
<span>first name: </span>
<input
defaultValue={defaultValue.firstName}
onChange={handleChangeFirstName}
/>
</div>
<div>
<span>last name : </span>
<input
defaultValue={defaultValue.lastName}
onChange={handleChangeLastName}
/>
</div>
</div>
);
};
|
配列で扱うにあたり、以下の方法を検討した。
HumanFormValue にidとなるもの付与する- onChangeのCurry化を行う
- valuesのlengthをみて関数の増減する
- 使う側で
HumanFormValue にidとなるもの付与する
1は確実にできるが、リストで扱われるかはComponentの責務として違うと思ったので除外。
最初は2でいけると考えたが、useEffectに引っかかってしまい無限ループが発生したのでこの方法では出来なかった。
3は出来たが、もう少し別の方法を考えてみた結果4が出てきた。
4の方法が以下。
以下の点に気をつけないといけないが、個人的には一番しっくり来たので他にいい方法が見つかるまではこの方法で配列管理していきたいと思う。
- HumanFormのonChangeの型とHumanFormValueWithKeyの型が合わないのでlintを少し緩くする必要がある
- 以下のように不用意なsetValuesをするとkeyが消える
setValue({firstName: '', lastName: ''})