技術標籤：reacthtmlforms

使用react-hook-form結合antd做表單時，想要做一個可增加和刪除輸入框的功能，如下圖

然而會存在刪除第二行時，顯示的卻是少了第三行的情況：

變成：

其實查看錶單結果，確實是刪除了第二行，但頁面顯示的效果感覺像是刪除了第三行，其實是程式碼塊的key值問題，給最外層迴圈綁定了key值就能解決（這裡是Space這一層）：

{fields.map((field, index) => (  
    <Space key={field.id}>       
       <Controller 
            name=
 
{`${props.name}[${index}]`}
            control={props.control}
            defaultValue={field.val}
            key={props.defaultValue}
            render={(data)=>{
               return<InputNumber
                          style={{width:150}}
                          defaultValue={field.val}
 

                          key={index}
                          placeholder='請輸入測評ID'
                             onChange={v=>onChange(v,index,data)}
                      />
             }}
       />
       <MinusCircleOutlined onClick={() => remove(index)} style={{marginRight:20}}/>
 
 
      </Space>                                  
))}