大家好,我使用React Hook Form和useFieldArray Hook建立了一個Material UI表單。
<網格容器間距={2}> <網格項 xs={12} sm={12} md={12} lg={12}> <文字字段 label="Evnet 名稱" 全螢幕寬度 {...註冊(“事件名稱”)} name="事件名稱" >> </網格> <網格項 xs={12} sm={12} md={6} lg={6}alignSelf=“center”> <文字字段 label="Evnet 場地名稱" 全螢幕寬度 {...註冊(“事件地點”)} name="活動地點" >> </網格> <框sx={{寬度:“100%” }}> <對話框標題 sx={{ fontWeight: “粗體”, textTransform: “大寫”; }} > 門票類別 </對話框標題> </框> <網格項xs={12} sm={12} md={5} lg={4}> <文字字段 標籤=“類別” 全螢幕寬度 {...註冊(“ticketCatName”)} name="ticketCatName"; >> </網格> <網格項xs={12} sm={12} md={3} lg={3}> <文字字段 類型=“數字” label="價格"; 全螢幕寬度 {...註冊(“ticketCatPrice”)} name="ticketCatPrice"; >> </網格> <網格項xs={12} sm={12} md={3} lg={3}> <文字字段 類型=“數字” 標籤=“總計” 全螢幕寬度 {...註冊(“ticketCatTotal”)} name=“ticketCatTotal” >> </網格> 這是我提交表單時得到的值。 </框></pre> <p>我創建了一個動態表單元件,使用地圖來顯示。</p> <pre class="brush:php;toolbar:false;">{fields.map((item, index) => { return ( <MoreFields register={register} key={item.id} remove={remove} index={index} item={item} control={control} /> ); })}</pre> <p>當我提交表單時,fields數組中的值不顯示數據,而fields數組之外的其他字段正常工作。 </p> <p>這是組件的程式碼。 </p> <pre class="brush:php;toolbar:false;">import { Box, Grid, IconButton, SvgIcon, TextField } from "@mui/material"; import React from "react"; import DeleteIcon from '@mui/icons-material/Delete'; import { Fragment } from "react"; const MoreFields = ({ register, remove, index, item }) => { return ( <Fragment key={item.id}> <Grid item xs={12} sm={12} md={5} lg={4}> <TextField label="Category" fullWidth {...register(`ticketCategory.${index}.ticketCatName`)} name={`ticketCategory${index}.ticketCatName`} defaultValue={item.ticketCatName} /> </Grid> <Grid item xs={12} sm={12} md={3} lg={3}> <TextField type="number" label="Price" fullWidth {...register(`ticketCategory.${index}.ticketCatPrice`)} name={`ticketCategory${index}.ticketCatPrice`} defaultValue={item.ticketCatPrice} /> </Grid> <Grid item xs={12} sm={12} md={3} lg={3}> <TextField type="number" label="Total" fullWidth {...register(`ticketCategory.${index}.ticketCatTotal`)} name={`ticketCategory${index}.ticketCatTotal`} defaultValue={item.ticketCatTotal} /> </Grid> <Grid item xs={4} sm={4} md={2} lg={2} alignSelf="center"> <SvgIcon color='error' onClick={()=>remove(index)} sx={{cursor:'pointer'}}> <DeleteIcon size="medium" /> </SvgIcon> </Grid> </Fragment> ); }; export default MoreFields;</pre> <p>我可以新增和刪除字段,但是當提交時,值不會顯示。不知道為什麼,請幫幫我。 </p> <p>我正在使用的hooks和函數。</p> const { 註冊、handleSubmit、控制 } = useForm(); const { 字段、追加、前置、刪除、交換、移動、插入 } = useFieldArray( { 控制, 名稱:“門票類別”, } ); const addFields = () =>; { 追加({ticketCatName:“”,ticketCatPrice:“”,ticketCatTotal:“”}); }; const 提交 = (資料) => { 控制台.log(資料); };</pre></p>
P粉2504220452023-09-02 10:25:28
你應該同時使用相同的名稱來註冊和命名屬性:
<TextField label="Category" fullWidth {...register(`ticketCategory.${index}.ticketCatName`)} name={`ticketCategory.${index}.ticketCatName`} defaultValue={item.ticketCatName} />;
React Hook Form需要你在陣列名稱中加入索引,因為它使用點表示法來存取巢狀欄位。例如,假設你有一個像這樣的物件數組:
{ "ticketCategory": [ { "ticketCatName": "A", "ticketCatPrice": 10, "ticketCatTotal": 100 }, { "ticketCatName": "B", "ticketCatPrice": 20, "ticketCatTotal": 200 } ] }
然後,每個輸入的名稱應該與表單資料中欄位的路徑相符。例如,第一個票類別名稱輸入應該具有名稱ticketCategory.0.ticketCatName
,第二個票類別價格輸入應該具有名稱ticketCategory.1.ticketCatPrice
。這樣,React Hook Form可以控制輸入值到表單資料中。