如何添加yup或验证材料表

时间:2019-10-17 09:47:05

标签: reactjs material-ui material-table

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

我创建了一个可重用的组件,所以我创建了一个带有列和数据的表。 我设置了版本和更新。 但是,我发现自己必须在BACK中管理用户输入的数据的验证。 我想使用像yup这样的验证方案来建立与Forms相同的系统。

代码如下:

<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 个答案:

答案 0 :(得分:0)

您将需要使用自己的逻辑来覆盖EditRow和/或EditField组件(只需将它们复制粘贴到您的项目中并进行相应的修补),然后将这些覆盖项提供给{{1 }}通过material-table属性进行配置。

现在恐怕没有其他办法了。