[英]React-Hook Form with useFieldArray: TextField value does not show up in the console. How can I fix it?
I wanted to enter the word Product
but when I submit it, it does not show up in the console.我想输入
Product
这个词,但是当我提交它时,它没有显示在控制台中。
What shows up in the console:控制台中显示的内容:
As you can see here, the word Product
does not appear in the console.正如您在这里看到的,
Product
一词没有出现在控制台中。 Any idea on how I can solve this?关于如何解决这个问题的任何想法?
This is the codesandbox link: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-vjwbp?file=/src/index.js这是 codesandbox 链接: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-vjwbp?file=/src/index.js
this is the fieldArray.js where the input fields for products is这是产品输入字段所在的 fieldArray.js
import React from "react";
import { useFieldArray } from "react-hook-form";
import NestedArray from "./nestedFieldArray";
import { TextField } from "@mui/material";
let renderCount = 0;
export default function Fields({ control, register, setValue, getValues }) {
const { fields, append, remove, prepends } = useFieldArray({
control,
name: "test"
});
renderCount++;
return (
<>
<ul>
{fields.map((item, index) => {
return (
<li key={item.id}>
{/* <select
ref={register()}
name={`test[${index}].name`}
defaultValue={item.name}
>
<option value="">Select</option>
<option value="10">ItemA</option>
<option value="20">ItemB</option>
</select> */}
{/* {index + 1} to show the qty */}
<TextField
name={`test[${index}].name`}
refer={register()}
defaultValue={item.name}
/>
<button type="button" onClick={() => remove(index)}>
Delete
</button>
<NestedArray nestIndex={index} {...{ control, register }} />
</li>
);
})}
</ul>
<section>
<button
type="button"
onClick={() => {
append({ name: "append" });
}}
>
Add product
</button>
</section>
<span className="counter">Render Count: {renderCount}</span>
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.