如何添加 yup 或驗證材料表

Question

我正在使用材料表庫： https://material-table.com/#/

我創建了一個可重用的組件，所以我創建了一個包含一列和一個數據的表。 我設置了版本和更新。 但是，我發現自己必須在 BACK 中管理用戶輸入的數據的驗證。 我想設置與 Forms 相同的系統，並使用像 yup 這樣的驗證方案。

這是代碼：

<Table 
    title="List type tiers"
    column={[{ title: 'TYPE TIERS', field: 'libelle' }]}
    data={tiersList}
    isLoading={isLoading}
    editable={{
        onRowAdd: newData =>
            new Promise(resolve => {
                setIsLoading(true);
                setTimeout(() => {  
                    addTypeTiers(newData.libelle)
                        .then(() => {
                            recuperationListTiers();
                        })
                    resolve();
                }, 600);
            }),
        onRowUpdate: (newData) =>
            new Promise(resolve => {
                setIsLoading(true);
                setTimeout(() => {
                    updateTypeTiers(newData.id, newData.libelle)
                        .then(() => {
                            recuperationListTiers();
                        })
                    resolve();
                }, 600);
            }),
    }}
    pageSize={pageSize}
    initialPage={initialPage}
    search
    paging
    headerStyle={{ height: '15px', minHeight: 'unset', fontWeight: 'bold', color: 'white', padding: '5px 40px 5px 16px', backgroundColor: 'grey' }}
/>

Answer 1

您將需要使用您自己的邏輯覆蓋EditRow和/或EditField組件（只需將它們復制粘貼到您的項目並相應地修補），然后通過components屬性將這些覆蓋提供給material-table配置。

恐怕目前沒有其他辦法解決這個問題。