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

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

新規登録して質問してみよう
ただいま回答率
87.20%
React.js

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

解決済

reactでのformの送信について

raguel
raguel

総合スコア25

React.js

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

1回答

0リアクション

0クリップ

183閲覧

投稿2022/07/20 16:27

編集2022/07/23 16:54

reactでのformの送信について

react

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

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

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

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

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

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

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

react

<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 の全文です。

react

/* 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;

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

maisumakun

2022/07/20 22:36

> 複数のinput内容が合わさって表示されます。 単に表示の違いにしか見えないのですが、何がどう違うと主張したいのでしょうか?
raguel

2022/07/22 14:08

ご返答、有難うございます。 上記プログラムでは、 「formdata.aaa」には「○○○」が挿入されていて、 「formdata.bbb」には「○○○○○が挿入されています。 下記プログラムでは、 「formdata」には「{"aaa":"○○○","bbb":"○○○○○"}」が挿入されていて、 「formdata.aaa」には何も挿入されていません。 「formdata.bbb」にも何も挿入されていません。
maisumakun

2022/07/22 14:10

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

2022/07/23 16:57

App.js の全文を追加させていただきました。 ブラウザで、「○○○」と「○○○○○」を入力すると、以下の様に表示されます。 formdata=「{"aaa":"○○○","bbb":"○○○○○"}」 formdata.aaa=「」 formdata.bbb=「」

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

React.js

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