如何添加 yup 或验证材料表

Posted 2023-02-22

【中文标题】如何添加 yup 或验证材料表

【英文标题】：How add yup or validation material-table

【发布时间】：2020-02-14 04:48:09

【问题描述】：

我正在使用材料表库：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' 
/>

【参考方案1】：

您需要使用您自己的逻辑覆盖EditRow 和/或EditField 组件（只需将它们复制粘贴到您的项目并相应地进行修补），然后通过@987654324 将这些覆盖提供给material-table 配置@属性。

恐怕目前没有其他办法。

【讨论】：

有没有办法在验证时禁用编辑按钮？就像我有一个可编辑的文本字段一样。更改值时，如果验证失败，我需要禁用可编辑按钮（用于保存）。我能够触发验证并返回。但它会将可编辑字段关闭为先前的值。我需要的是禁用保存（编辑）按钮或保持行打开（编辑模式），即使单击保存按钮（如果验证失败）。