Reactでフォームに入力した値を確認ページで表示させること

実装したいこと

ReactとTypeScriptでお問い合わせフォームを実装しています。
お問い合わせフォームに入力された内容を確認ボタンを押下し、問い合わせ確認画面で入力した内容が表示されるようにしたいです。

現状、フォームに入力されたデータは
setFormData関数によって値が更新されています。
更新されたデータをpropsとして受け渡しContactConfirm.tsxで表示させるには
どのような記述が適切でしょうか。

typescript
1// Components > ContactNew.tsx
2
3import React, { useState } from 'react';
4import { Link } from 'react-router-dom';
5
6function ContactNew(props: any) {
7  function handleContactNew() {
8    // 略
9  }
10
11  const FormData = props
12
13  type FormData = {
14    nickname :string,
15    email: string,
16    content: string,
17  }
18
19  const [ formData, setFormData ] = useState<FormData>({
20    name: '',
21    email: '',
22    content: '',
23  });
24
25  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
26    e.persist();
27    const { name, value } = e.target
28    setFormData({ ...formData, [name]: value })
29  }
30
31  return (
32      <>
33        <PageTitle>お問い合わせ</PageTitle>
34
35        <PageSubTitle>名前</PageSubTitle>
36        <input name="nickname" type="text"  onChange={onChangeHandler} value={formData.nickname} />
37
38        <PageSubTitle>Eメール</PageSubTitle>
39        <input name="email" type="text" onChange={onChangeHandler} value={formData.email} />
40
41        <PageSubTitle>お問い合わせ内容</PageSubTitle>
42        <textarea name="content" onChange={onChangeHandler} value={formData.content} />
43
44        <Link to={pathname} >
45          <FormSubmit onClick={handleContactNew}>
46            確認へ
47          </FormSubmit>
48        </Link>
49  　</>
50  )
51}
52
53export default ContactNew;

typescript
1// Components > ContactConfirm.tsx
2
3import React, { useEffect, useState } from 'react';
4import { Link } from 'react-router-dom';
5import ContactNew from '../ContactNew';
6
7const ContactConfirm = () => {
8  function handleContactSend() {
9    // APIにPOSTする処理
10  }
11
12  return (
13      <>
14        <PageTitle>お問い合わせ確認</PageTitle>
15
16        <PageSubTitle>名前</PageSubTitle>
17          // ここにフォームの入力内容を表示する
18        <PageSubTitle>Eメール</PageSubTitle>
19          // ここにフォームの入力内容を表示する
20        <PageSubTitle>お問い合わせ内容</PageSubTitle>
21          // ここにフォームの入力内容を表示する
22        <Submit onClick={handleContactSend}>
23          送信
24        </FormSubmit>
25     </>
26  )
27};
28
29export default ContactConfirm;
30

hoshi-takanori

2022/06/21 09:52

ContactNew から ContactConfirm にどのように画面遷移するかによりますが、共通の親コンポーネントを介して受け渡すか、Context や Redux などを使うかでしょうね。

CSHky130

2022/06/21 11:54

別途親コンポーネント作成する方法でもやってみます。

行動規範の内容に同意します

回答1件

自己解決

以下の記述で解決できました。

Linkコンポーネントにstateの属性を追加してConfirmコンポーネントにデータを受け渡します。

typescript
1// Components > ContactNew.tsx
2
3import React, { useState } from 'react';
4import { Link } from 'react-router-dom';
5
6function ContactNew(props: any) {
7  function handleContactNew() {
8    // 略
9  }
10
11  // 略
12
13  return (
14    <>
15  // 略
16      <Link to={pathname} state={{ formData: formData }}>
17        <FormSubmit onClick={handleContactNew}>
18          確認へ
19        </FormSubmit>
20      </Link>
21    </>
22  )
23}
24
25export default ContactNew;

渡されたデータをuseLocationで受け取り、
{state.formData.nickname}でデータを表示させました。

typescript
1
2// Components > ContactConfirm.tsx
3
4import React, { useEffect, useState } from 'react';
5import { Link } from 'react-router-dom';
6import ContactNew from '../ContactNew';
7
8//  Stateのタイプを定義する
9interface stateType {
10  formData: {
11    nickname: string,
12    email: string,
13    content: string,
14  }
15}
16
17const ContactConfirm = () => {
18  function handleContactSend() {
19    // APIにPOSTする処理
20  }
21
22  // StateをuseLocationでデータ取得
23  const state = useLocation().state as stateType;
24  console.log(state.formData);
25
26  return (
27    <>
28      <PageTitle>お問い合わせ確認</PageTitle>
29      <PageSubTitle>名前</PageSubTitle>
30        // データの表示
31        {state.formData.nickname}
32        // 略
33      <Submit onClick={handleContactSend}>
34        送信
35      </FormSubmit>
36   </>
37  )
38};
39
40export default ContactConfirm;