実現したいこと
react-hook-formで作ったフォーム画面に確認ダイアログを追加する。
前提
もともと入力フォーム画面を作っていましたが、submitしたときに、処理を行う最終確認ができるようにしたいと思い、
確認ダイアログ的なものを追加することにしました。
発生している問題・エラーメッセージ
確認ダイアログを別コンポーネントで作成し、投稿ボタンを押したときにそれを呼び出すようにしました。
しかし、この方法ですと、①確認ダイアログ表示→②登録処理を行う。
という感じで別の機能をまたぐ形となり、この場合にフォームの入力内容をどう保持したらいいか知りたいです。
①の時点ではデータを持ってますが、②に行くときにデータがなくなっちゃいます。
どんな感じでデータを次々に受け渡しをやってけばいいのかがわかりません。
仕様が守られてればなんでもいいので、別の方法で実現可能でしたら教えてください。
該当のソースコード
Form.tsx
1import React, { useState } from 'react'; 2import { useForm } from 'react-hook-form'; 3 4import { Doregist } from '../../api/users'; 5 6import Confirm from '../../Confirm'; 7 8 9 export const Form = () => { 10 const [confirm, setConfirm] = useState(false); 11 const [formdata, setformData] = useState<Params>() 12 13 const { register, handleSubmit } = useForm<Params>(); 14 15 const openConfirm = (data: Params) => { 16/*ここの時点では、dataに情報がある。これをonsubmitにも引き継ぎたい。*/ 17 setFormData(data); 18 setConfirm(true) 19 } 20 21 const onSubmit = async(data: Params) =>{ 22 const res = await Doregist(data) 23 } 24 25 return( 26 <div> 27 28 <Confirm 29 msg="登録しますか？" 30 isOpen={confirm} 31 doYes={onSubmit} 32 doNo={() => {setConfirm(false)}} 33 /> 34 35 <form onSubmit={handleSubmit(openConfirm)}> 36 37 <p>name</p> 38 <input id="name" {...register('name')} /> 39 40 <button className="btn" type="submit">EDIT!</button> 41 </form> 42 43 </div> 44 ) 45 } 46 47export default Form;
Confirm
1import React, { useState, useEffect } from 'react'; 2import Button from '@mui/material/Button'; 3import Dialog from '@mui/material/Dialog'; 4import DialogActions from '@mui/material/DialogActions'; 5import DialogContent from '@mui/material/DialogContent'; 6 7interface ConfirmProps { 8 msg: string 9 isOpen: boolean 10 doYes: Function 11 doNo: Function 12} 13 14 export const Confirm = ({ msg, isOpen, doYes, doNo }: ConfirmProps) => { 15 16 const [open, setOpen] = useState(false); 17 18 useEffect(() => { 19 setOpen(isOpen) 20 }, [isOpen]) 21 22 return ( 23 <div> 24 <Dialog 25 open={open} 26 keepMounted 27 onClose={() => doNo()} 28 aria-labelledby="common-dialog-title" 29 aria-describedby="common-dialog-description" 30 > 31 <DialogContent> 32 {msg} 33 </DialogContent> 34 <DialogActions> 35 <Button onClick={() => doNo()}> 36 No 37 </Button> 38 <Button onClick={() => doYes()}> 39 Yes 40 </Button> 41 </DialogActions> 42 </Dialog> 43 </div> 44 ) 45 } 46 47export default Confirm
試したこと
確認ダイアログを表示する機能にいるときは、dataという値の中にフォームの入力内容がまだ生きてます。
上記では、openConfirmの段階でこれを適当な関数に入れてみるのはどうかと思いましたが失敗しました。
onSubmitでは、既にデータが空っぽでした。
他に考えられる手としては、openConfirmとonSubmitの処理を一つの関数内で行うとか。
また、useEffect、await、asyncを活用するとか？
色々考えましたがどうにもやりかたが実際わからないという感じです。
補足情報（FW/ツールのバージョンなど）
react
typescript
axios
0 コメント