reactでのformの送信について

Question

reactでのformの送信について

const formdata = {
	aaa: "○○○", bbb: "○○○○○"
};

と記述し、console.log(formdata);を実行すると、

{aaa: '○○○', bbb: '○○○○○'}
aaa: "○○○"
bbb: "○○○○○"

と表示されますが、
reactでformを記述・実行し、console.log(formdata);を実行すると、

{"aaa":"○○○","bbb":"○○○○○"}

と、複数のinput内容が合わさって表示されます。

上記の様に、formdataを連想配列として格納したいのですが、解決方法はあるのでしょうか。

<form onSubmit={handleSubmit((formdata) => setData(JSON.stringify(formdata)))}>
<input {...register("aaa")} type="text" name="aaa" />
<input {...register("bbb")} type="text" name="bbb" />
<input type="submit" />
</form>

formには、react-hook-formをインポートしています。

以下が、App.js の全文です。

/* App.js */

import { useState } from "react";
import { useForm } from "react-hook-form";

export function App() {
  const { register, setValue, handleSubmit } = useForm();
  const [formdata, setData] = useState("");


  return (
    <div style={{ 'padding': '20px' }}>
      <form onSubmit={handleSubmit((formdata) => setData(JSON.stringify(formdata)))}>
        <input {...register("aaa")} type="text" name="aaa" />
        <input {...register("bbb")} type="text" name="bbb" />
        <input type="submit" />
      </form>

      <div>formdata=「{formdata}」</div>
      <div>formdata.aaa=「{formdata.aaa}」</div>
      <div>formdata.bbb=「{formdata.bbb}」</div>

      {console.log(formdata)}

    </div >

  );
}

export default App;

Comments

[maisumakun]

> 複数のinput内容が合わさって表示されます。

単に表示の違いにしか見えないのですが、何がどう違うと主張したいのでしょうか？

[raguel]

ご返答、有難うございます。

上記プログラムでは、
「formdata.aaa」には「○○○」が挿入されていて、
「formdata.bbb」には「○○○○○が挿入されています。

下記プログラムでは、
「formdata」には「{"aaa":"○○○","bbb":"○○○○○"}」が挿入されていて、
「formdata.aaa」には何も挿入されていません。
「formdata.bbb」にも何も挿入されていません。

[maisumakun]

データの受信側はどのようなコードになっていますか？

[raguel]

App.js の全文を追加させていただきました。

ブラウザで、「○○○」と「○○○○○」を入力すると、以下の様に表示されます。

formdata=「{"aaa":"○○○","bbb":"○○○○○"}」
formdata.aaa=「」
formdata.bbb=「」

Answer 1

以下のように修正するとよいかと思います。

 export function App() {
   const { register, setValue, handleSubmit } = useForm();
-  const [formdata, setData] = useState("");
+  const [formdata, setData] = useState({});
 
 
   return (
     <div style={{ 'padding': '20px' }}>
-      <form onSubmit={handleSubmit((formdata) => setData(JSON.stringify(formdata)))}>
+      <form onSubmit={handleSubmit((formdata) => setData(formdata))}>
         <input {...register("aaa")} type="text" name="aaa" />
         <input {...register("bbb")} type="text" name="bbb" />
         <input type="submit" />
       </form>
 
-      <div>formdata=「{formdata}」</div>
+      <div>formdata=「{JSON.stringify(formdata)}」</div>
       <div>formdata.aaa=「{formdata.aaa}」</div>
       <div>formdata.bbb=「{formdata.bbb}」</div>

Comments

[raguel]

望んでいた完璧な答えに感謝です。

有難うございました。