ant design 中的form表單,結(jié)合redux如何為其賦初始值?

科技 未結(jié) 3 1524
一虹
一虹 2023-04-17 19:33

問題描述:項目中使用了ant design和redux,現(xiàn)在在一個畫面中有一個表格,表格中的每一行都有一個編輯按鈕,點擊之后會彈出一個模態(tài)框(ant design中的modal),模態(tài)框里是一個表單,希望點擊每一個編輯按鈕之后,動態(tài)去服務(wù)器加載數(shù)據(jù)并賦值到模態(tài)框中的表單里去以實現(xiàn)數(shù)據(jù)的編輯。如下圖所示:


之前的實現(xiàn)方法是將表單中的數(shù)據(jù)放在redux store 中,然后通過dispatch來更改數(shù)據(jù),但是在將store中的數(shù)據(jù)與表單進行綁定的時候發(fā)現(xiàn)無法進行綁定。查閱了ant design 的文檔之后發(fā)現(xiàn),它的form組件的prop是需要Form.create(options)來提供的,官方也給出了與redux進行結(jié)合的api,如下:

按照官方文檔文檔進行更改之后,并沒有效果,控制臺打印了mapPropsToFields(props)中的props,其內(nèi)部沒有redux store中的數(shù)據(jù),所以無法達到我的要求。
問題猜想:自定義form組件中的props是通過react-redux 的connect來進行注入的,而antdesign的form需要form.create來為其提供props.form屬性。而form.create時,并沒有與redux的store進行關(guān)聯(lián)。
但是ant官方既然給出了結(jié)合方法并明確進行了說明,那么肯定是我的使用方法不正確。疑問就在這個地方。特來求大神幫助。
目前只是在這個模態(tài)框子組件中加了一個ref屬性,在外層調(diào)用了ref的setFieldsValue來實現(xiàn)表單數(shù)據(jù)的更換。表單的數(shù)據(jù)也沒有存儲在redux store中。

3條回答
  •  57999222
    57999222 (樓主)
    2023-04-17 20:30

    要用 <Provider> 包裹組件,并用 connect 連接組件以后。props 里才有 store 的數(shù)據(jù)。然后用 getFieldProps 進行雙向綁定。

提交回復(fù)