フォームとモーダルは相性が悪いよ という話 その後
2020-07-23
React ならこう書けば自然かなーと思える実装が思い浮かんだので追記をば。
あくまでイメージなので、下のコードをコピペしても動きません、あしからず。
type Values = {
fuga: string;
};
const Hoge: FC = () => {
const [values, setValues] = useState<Values>({ fuga: "" });
const [showModal, setShowModal] = useState(false);
const handleSubmit = useCallback(
(values) => {
setValues(values);
setShowModal(true);
},
[setShowModal, setValues],
);
const handleClick = useCallback<
NonNullable<JSX.IntrinsicElements["button"]["onClick"]>
>(() => {
// 本来の submit 処理を行う
console.log(values);
setShowModal(false);
}, [setShowModal, values]);
return (
<>
<form onSubmit={handleSubmit}>
<input name="fuga" />
<button type="submit">送信</button>
</form>
{showModal ? (
<div>
<button onClick={handleClick}>OK</button>
</div>
) : null}
</>
);
};
以前書いたやつよりはマシですが、values の二重管理はイヤですね、やっぱり汚く見えます。
values を state で見る時点でパフォーマンスも悪そうですし、保守性も低いですし、何よりわかりづらいですねこれ。
あとは callback でなんとか組めるのかなぁ…もう書きませんが。
やっぱりモーダルを挟まないのが一番無難な気がします。