說(shuō)明：
只記錄個(gè)人錯(cuò)誤和解決方法汗茄，如果可以被饿，希望能幫助到您四康，給您提供一個(gè)思路，但技術(shù)不斷更新锹漱，所以一切以官網(wǎng)為主箭养。
需求：
在Antd的Modal中在Form組件中完成點(diǎn)擊按鈕展開(kāi)右側(cè)：
展開(kāi)如下圖所示：
問(wèn)題1：
但Antd中默認(rèn)是一行一行，如果直接在< Form.item >中嵌套< Form.item >會(huì)報(bào)題示的錯(cuò)誤哥牍。
解決1：
在官方文檔中的 < Form > 說(shuō)明中毕泌，右側(cè)導(dǎo)航欄“復(fù)雜一點(diǎn)的控件”
以下文字摘自官網(wǎng)：
這里演示 Form.Item 內(nèi)有多個(gè)元素的使用方式。<Form.Item name="field" /> 只會(huì)對(duì)它的直接子元素綁定表單功能嗅辣，例如直接包裹了 Input/Select撼泛。如果控件前后還有一些文案或樣式裝點(diǎn)，或者一個(gè)表單項(xiàng)內(nèi)有多個(gè)控件澡谭，你可以使用內(nèi)嵌的 Form.Item 完成愿题。你可以給 Form.Item 自定義 style 進(jìn)行內(nèi)聯(lián)布局，或者添加 noStyle 作為純粹的無(wú)樣式綁定組件（類似 3.x 中的 getFieldDecorator）。
- <Form.Item label="Field" name="field">
- < Input />
- </Form.Item>
+ <Form.Item label="Field">
+ <Form.Item name="field" noStyle><Input /></Form.Item> // 直接包裹才會(huì)綁定表單
+ <span>description</span>
+ </Form.Item>
這里展示了三種典型場(chǎng)景：
Username：輸入框后面有描述文案或其他組件潘酗，在 Form.Item 內(nèi)使用 <Form.Item name="field" noStyle /> 去綁定對(duì)應(yīng)子控件杆兵。
Address：有兩個(gè)控件，在 Form.Item 內(nèi)使用兩個(gè) <Form.Item name="field" noStyle /> 分別綁定對(duì)應(yīng)控件仔夺。
BirthDate：有兩個(gè)內(nèi)聯(lián)控件琐脏，錯(cuò)誤信息展示各自控件下，使用兩個(gè) <Form.Item name="field" /> 分別綁定對(duì)應(yīng)控件缸兔，并修改 style 使其內(nèi)聯(lián)布局日裙。
注意，在 label 對(duì)應(yīng)的 Form.Item 上不要在指定 name 屬性惰蜜，這個(gè) Item 只作為布局作用昂拂。
實(shí)例：
const onChangeChecked = (checked) => {
setRefreshType(checked)
}
<Form.Item
label="One"
valuePropName='checked'
style={{ margin: 0 }}
>
<Form.Item
name="one"
valuePropName='checked'
style={{ display: 'inline-block', marginRight: '15%' }}
>
<Switch onChange={onChangeChecked} />
</Form.Item>
<Form.Item
name="first"
style={{ display: 'inline-block' }}
>
<div>
<label>One-first:</label>
<InputNumber min={1} defaultValue={editIntervalTime || 1} />
<span className="ant-form-text"> minutes</span>
</div>
</Form.Item>
</Form.Item>
<Form.Item
label="Two"
style={{ margin: 0 }}
>
<Form.Item
name="two"
valuePropName='checked'
style={{ display: 'inline-block', marginRight: '15%' }}
>
<Switch onChange={onChangeCapping} />
</Form.Item>
<div style={{ display: 'inline-block' }}>
<Form.Item
name="two_first"
style={{ display: 'inline-block' }}
>
<div>
<label>Two-first:</label>
<InputNumber min={0} defaultValue={editImpLimit || 1} />
</div>
</Form.Item>
<Form.Item
name="two_second"
style={{ display: 'inline-block' }}
>
<div>
<label>Two-second:</label>
<Radio.Group onChange={onChangeRadio} value={editImpType || 1} >
<Radio value={1}>Male</Radio>
<Radio value={2}>Female</Radio>
</Radio.Group>
</div>
</Form.Item>
</div>
</Form.Item>
問(wèn)題2：
< Form >默認(rèn)提交事件 onFinish={onFinish}，無(wú)法獲取到嵌套中的數(shù)據(jù)抛猖；
解決2：
從編輯事件中格侯，把對(duì)應(yīng)數(shù)據(jù)提升為共享數(shù)據(jù)。
問(wèn)題3：
提升到共享的數(shù)據(jù)樟结，無(wú)法被form.resetFields() 清除养交；
解決3：
在Modal取消事件中，把對(duì)應(yīng)共享數(shù)據(jù)清空瓢宦；
const handleCancel = () => {
setVisible(false)
setEditOne()
setEditTwoFirst()
setEditTwoSecond()
};
Modal中添加語(yǔ)句 ：destroyOnClose={true}
(詳見(jiàn) Modal 碎连，< Modal /> 默認(rèn)關(guān)閉后狀態(tài)不會(huì)自動(dòng)清空, 如果希望每次打開(kāi)都是新內(nèi)容，請(qǐng)?jiān)O(shè)置 destroyOnClose驮履。)
收尾：
在解決過(guò)程中得到了以下的幫助：
