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

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

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

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

Q&A

解決済

1回答

4039閲覧

React-hook-formで行の追加、削除ボタンを実装したい

07290729

総合スコア15

React.js

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

0グッド

0クリップ

投稿2020/06/04 07:15

編集2020/07/21 01:06

以下のような画面で
"+" を押して行が追加
"-" を押して行を削除

といったフォームを作ろうとしていますが
"+" を押してもうまく行が追加されません。。。
(押しても欄が出力されない、address.0 -> address.1 に置き換わってしまう、など)

また、before transaction~ のlogがconsole上に2回出力されてしまいます。

イメージ説明

どのあたりに原因があるか
わかる方、ご教授いただけないでしょうか。。。

よろしくお願いいたします。

import React, {useState} from 'react'; import { useForm } from "react-hook-form"; function ArraySample() { const {register, handleSubmit} = useForm(); const [addresses, setAdresses] = React.useState(["address.0"]); function addAddress() { const newAddresses = [...addresses]; console.log("before", newAddresses, addresses, `address.${addresses.length}`); newAddresses.push(`address.${(addresses.length)}`); setAdresses(newAddresses); console.log(newAddresses, addresses, `address.${addresses.length}`); }; function removeAddress (index) { if (addresses.length > 1) { console.log("target", index); addresses.splice(index, 1); } } return ( <form onSubmit={handleSubmit()}> console.log("before transaction ----------") <h3>Address</h3> <button type="button" onClick={addAddress}> + </button> {addresses.map((address, index) => { return ( <div key={address}> <label>Address</label> <input type="text" name={address} ref={register} /> <button type="button" onClick={removeAddress(index)}> - </button> </div> ) })} </form> ) } export default ArraySample;

addAddress ボタンを押したときのlog

イメージ説明

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

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

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

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

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

markey

2020/06/04 12:37

addAddressにもconsole.logを仕込んでいますがそちらではどう出力されていますか?
07290729

2020/06/05 06:06

markeyさん ご回答ありがとうございます! 画像添付しましたのでご確認ください!
guest

回答1

0

ベストアンサー

-のボタンですが、こう変えてみるとどうでしょうか?

diff

1- <button type="button" onClick={removeAddress(index)}> 2+ <button type="button" onClick={() => {removeAddress(index)}}>

投稿2020/06/05 12:09

markey

総合スコア355

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

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

07290729

2020/06/06 10:14

ご回答ありがとうございます。 ただ、、、いまできていないのが"追加"のほうなので 削除は試すことができず、、、 (状況説明の文言がわかりずらかったのかもしれません、、申し訳ないです。 少し修正しましたのでご確認いただければ幸いですm
markey

2020/06/06 10:34

いえ、補足すると削除ボタンの書き方の影響で追加ボタンが効いていない可能性があります。 `onClick={removeAddress(index)}`という書き方だとレンダリングの度にremoveAddressが実行されてしまいます。`if (addresses.length > 1)`という条件があるので初期表示時は問題ありませんが、追加ボタンを押した際の流れは↓のようだと考えられます。 1. 追加ボタンを押し、addAddressが実行される 2. addressesに要素が追加され配列のlengthが2になる 3. コンポーネントが再レンダリングされる 4. 上記の問題によりremoveAddress(index)が自動で実行されてしまう 5. `if (addresses.length > 1)`という条件に通ってしまい、配列の要素が削除されてしまう 6. それにより追加ボタンを押したのに要素が増えてないように見える(実際には増えたが、その後減った)
07290729

2020/06/06 12:16

なるほど! すみません、、、意味を理解せずに発言してしまいまして。。。 ご指摘の通り修正したところ 追加に関してはうまくできました! ありがとうございます! 削除機能も同じように実装してみますm
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問