需求：表單中需要在item后面添加文字備注，如果不使用FormItem嵌套FormItem時，編輯操作的時候會出現回填不成功的問題。

?當不使用formItem嵌套的時候：這時候點擊編輯的時候，數據獲取到了但是沒有在頁面中回填，原因是<FormItem></FormItem>中的根元素只能是一個表單控件標簽，不能是<>或者是<div>等。

const formData = [{id: 'name',label: '廣告名稱',rules: [{ required: true, message:'請輸入' }],children: <><Input allowClear placeholder='請輸入' /><span>表單項的備注說明--廣告名稱</span></>,},{id: 'position',label: '廣告位置',rules: [{ required: true, message:'請選擇' }],children: <><Selectplaceholder='請選擇'onChange={(value) => {setPosition(value);form.setFieldsValue({position: value,});}}>{positionOption}</Select><span>表單項的備注說明--廣告位置</span></>,}, ] <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>{formData.map((item, index) => {const key = `${index}_formDataItem`;return (<Col key={key} xs={24} sm={24} md={12} lg={8} xl={6}><FormItem label={item.label} name={item.id}>{item.children}</FormItem></Col>);})} </Row>

這時候就該使用<FormItem></FormItem>嵌套解決問題，代碼如下：

const formData = [{id: 'name',label: '廣告名稱',rules: [{ required: true, message: '請輸入' }],remark: <span>備注說明--廣告名稱</span>,children: <Input allowClear placeholder='請輸入' />,},{id: 'position',label: '廣告位置',rules: [{ required: true, message: '請選擇' }],remark: <span>備注說明--廣告位置</span>,children: (<Selectplaceholder='請選擇'onChange={(value) => {setPosition(value);form.setFieldsValue({position: value,});}}>{positionOption}</Select>),}, ] <Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 16 }}>{formData.map(({ id, label, rules, hidden, children, remark }) => {return (<FormItemkey={id}label={label}hidden={hidden}required={id !== 'remarks' && true} // 手動添加required 屬性><div className="flex items-center"><Col span={id === 'image' ? 4 : 18} className="mr-4"><FormItem name={id} rules={rules} noStyle>{children}</FormItem></Col><span>{remark}</span></div></FormItem>);})}</Form>

這時候就解決了編輯時回填的問題。

這時候又會出現另一個問題就是：“必填項的紅色*在頁面中沒有出現，也就是<FormItem rules={rules}>綁定rules后紅色*必填提示沒有生效”，這時解決這個問題的辦法就是在<FromItem>標簽中手動添加 required屬性。

總結

以上是生活随笔為你收集整理的antd FormItem嵌套FormItem的适用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。