質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

842閲覧

formの入力内容を保持する方法がわかりません。

gomes_2222

総合スコア90

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/03/03 06:21

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

結論から言うと、方法がやはりみつからなかったです。
①確認ダイアログ表示→②登録処理をひとつのconstの中で実行するようにしました。

useContextなどを使う方法も考えられますが、そこまでせず、上記のやり方がスッキリすると思います。

投稿2023/03/04 08:27

gomes_2222

総合スコア90

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問