material-table 中的错误消息

Question

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

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);
        }),
    }}
/>

Answer 1

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

这里有一个 sandbox 供您查看。

Answer 2

您可以使用 material table.

中的 validate 道具简单地验证电子邮件

 columns: [
    { 
       title: 'Email', 
       field: 'email',
       validate : rowData => { 
        const EMAIL_REGEX = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        if(!EMAIL_REGEX.test(rowData.email)){
           return{isValid:false,helperText:'Invalid Email'}
        }else{
           return true
        }
       }
     }
],

material-table 中的错误消息

an ErrorMessage in material-table

material-table