时间戳

首页 > 解决方案 > 材料表中的错误消息

material-table - 材料表中的错误消息

问题描述

我在进行验证时尝试输入错误消息。例如-当用户尝试更新电子邮件时，他的电子邮件未验证，我有 emailError '电子邮件未验证'，我不会在输入字段中显示。有人可以帮我解决这个问题吗？谢谢。

this.state = {
    columns: [
        { title: 'Name', field: 'fullName', },
        { title: 'Permission groups', field: 'permissionGroups' },
        { title: 'Email', field: 'email' }
    ],
    formErrors: { emailError: '', fullNameError: '', permissionGroupsError: '' }

//

<MaterialTable

    icons={tableIcons}
    columns={this.state.columns}
    data={this.props.rows}
    editable={{
        onRowUpdate: (newData, oldData) =>
        new Promise((resolve, reject) => {
            setTimeout(() => {
            if (this.checkValidation()){

                resolve();
            }                                
            reject();
            }, 600);
        }),
        onRowAdd: newData =>
        new Promise((resolve, reject) => {
            setTimeout(() => {
            if (this.checkValidation()) {

                resolve();
            }
            reject();
            }, 600);
        }),
    }}
/>

标签： material-table

解决方案

这有点棘手。您需要覆盖editComponent以显示错误消息。为此，您可以阻止传递给的 onChange 函数editComponent并使用挂钩来保持本地状态。本地状态处理新输入和验证。如果验证成功，则内容仅传递回表。

这是一个沙盒供您检查。

推荐阅读