<p>大家好，저희는 React Hook Form과 useFieldArray Hook을 사용하여 Material UI表单를 사용합니다.</p> <pre class="brush:php;toolbar:false;"><상자 구성요소="양식" onSubmit={handleSubmit(제출)}> <그리드 컨테이너 간격={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: "bold", textTransform: "대문자" }} > 티켓 카테고리 </DialogTitle> </박스> <그리드 항목 xs={12} sm={12} md={5} lg={4}> <텍스트 필드 label="카테고리" 전체 넓이 {...등록("ticketCatName")} name="ticketCatName" /> </그리드> <그리드 항목 xs={12} sm={12} md={3} lg={3}> <텍스트 필드 유형="번호" label="가격" 전체 넓이 {...등록("ticketCatPrice")} name="ticketCatPrice"; /> </그리드> <그리드 항목 xs={12} sm={12} md={3} lg={3}> <텍스트 필드 유형="번호" label="전체" 전체 넓이 {...등록("ticketCatTotal")} name="ticketCatTotal" /> </그리드> 양식을 제출할 때 얻는 값입니다. </박스></pre> <p>저는 지도를 사용하여 지도를 사용합니다.</p> <pre class="brush:php;toolbar:false;">{fields.map((item, index) => { 반품 ( <더보기필드 등록={등록} 키={item.id} 제거={제거} 색인={색인} 항목={항목} 컨트롤={컨트롤} /> ); })}</pre> <p>양식을 제출하면 필드 배열의 값이 데이터를 표시하지 않는 반면 필드 배열 외부의 다른 필드는 제대로 작동합니다. </p> <p>구성요소에 대한 코드입니다. </p> <pre class="brush:php;toolbar:false;">import { Box, Grid, IconButton, SvgIcon, TextField } from "@mui/material" "반응"에서 반응을 가져옵니다;; '@mui/icons-material/Delete'에서 삭제 아이콘을 가져옵니다. import { Fragment } from "react" const MoreFields = ({ 등록, 제거, 색인, 항목 }) => 반품 ( <조각 키={item.id}> <그리드 항목 xs={12} sm={12} md={5} lg={4}> <텍스트 필드 label="카테고리" 전체 넓이 {...register(`ticketCategory.${index}.ticketCatName`)} 이름={`ticketCategory${index}.ticketCatName`} defaultValue={item.ticketCatName} /> </그리드> <그리드 항목 xs={12} sm={12} md={3} lg={3}> <텍스트 필드 유형="번호" label="가격" 전체 넓이 {...register(`ticketCategory.${index}.ticketCatPrice`)} 이름={`ticketCategory${index}.ticketCatPrice`} defaultValue={item.ticketCatPrice} /> </그리드> <그리드 항목 xs={12} sm={12} md={3} lg={3}> <텍스트 필드 유형="번호" label="전체" 전체 넓이 {...register(`ticketCategory.${index}.ticketCatTotal`)} 이름={`ticketCategory${index}.ticketCatTotal`} defaultValue={item.ticketCatTotal} /> </그리드> <그리드 항목 xs={4} sm={4} md={2} lg={2} alignSelf="center"> <SvgIcon color='error' onClick={()=>remove(index)} sx={{cursor:'pointer'}}> <DeleteIcon 크기="중간" </SvgIcon> </그리드> </조각> ); }; 기본 MoreFields;</pre> 내보내기 <p>필드를 추가하고 제거할 수 있지만 제출하면 값이 표시되지 않습니다. 이유를 모르겠습니다. 도와주세요. </p> <p>내가 사용하고 있는 후크와 기능입니다.</p> <pre class="brush:php;toolbar:false;">const { 레지스터, 핸들 제출, 제어 } = useForm(); const { 필드, 추가, 앞에 추가, 제거, 교환, 이동, 삽입 } = useFieldArray( { 제어, 이름: "티켓카테고리", } ); const addFields = () => { Append({ ticketCatName: "", ticketCatPrice: "", ticketCatTotal: "" }); }; const 제출 = (데이터) => { console.log(데이터); };</pre></p>