以下のような画面で
"+" を押して行が追加
"-" を押して行を削除
といったフォームを作ろうとしていますが
"+" を押してもうまく行が追加されません。。。
(押しても欄が出力されない、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
回答1件
あなたの回答
tips
プレビュー