Antd表單FormList

郭杰前端开发發表於2024-04-17
ORM

Antd表單FormList

❓：初始化值一兩條資料
💡：直接透過form.setFieldsValue設定

❓：在list中怎麼獲取當前表單元件對應的資料
💡：透過form.getFieldValue

  • 🔴 1、getFieldValue 用法

    • 🟢 1.1、獲取普通欄位的值：
    const username = form.getFieldValue('username');

    在這裡，username是一個普通的欄位（不是巢狀的），該欄位的值直接被檢索。

    • 🟢 1.2、獲取巢狀欄位的值：
     const street = form.getFieldValue(['address', 'street']);

    如果你的表單是巢狀的物件（例如，地址是一個包含街道、城市、郵編等屬性的物件），你需要使用陣列作為getFieldValue的引數，陣列中的每個元素代表訪問巢狀物件路徑的一級。

    • 🟢 1.3、獲取Form.List中的欄位值：
    const userFirstName = form.getFieldValue(['users', field.name, 'firstName']);

    當你使用Form.List元件並希望獲取其中某個列表項的特定欄位時，你同樣需要使用陣列形式的引數。這裡'users'是Form.List的name屬性值，field.name是當前列表項的索引（通常由Form.List回撥提供），而'firstName'是我們想要獲取其值的特定欄位名稱。

    引數field.name提供了陣列中當前項的索引，這對於在Form.List中定位陣列項至關重要。需要注意的是，當使用這樣的呼叫方式時，確保field.name是正確的索引，否則可能會檢索到錯誤的值或是undefined。

相關文章