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

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

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