フォームとモーダルは相性が悪いよ という話 その後

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 でなんとか組めるのかなぁ…もう書きませんが。

やっぱりモーダルを挟まないのが一番無難な気がします。

© 2018 kk-web