React MaterialTable可编辑行验证-如何显示和隐藏错误？

Question

我有一个材料表，我只想在用户单击保存按钮时在行编辑中进行字段验证。

我具有此功能来设置错误：

const [nameError, setNameError] = useState({
        error: false,
        label: '',
        helperText: '',
    });

还有onRowUpdate：

onRowUpdate: (newData, oldData) =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {

                            if (newData.name === '') {
                                setNameError({
                                    error: true,
                                    label: 'required',
                                    helperText: 'Required helper text'
                                });
                                reject();
                                return;
                            }

                            resolve();
                            if (oldData) {
                                setState(prevState => {
                                    const data = [...prevState.data];
                                    data[data.indexOf(oldData)] = newData;
                                    return { ...prevState, data };
                                });
                            }
                        }, 600);
                    })

我可以设置错误，问题是，如果我单击“取消”按钮，下次单击编辑时，错误仍然可见。

这是一个gif：

我试图寻找类似 onCancelEdit 的事件，但没有找到任何东西，您知道如何解决吗？

您可以在

完成React组件代码：

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};



export default function MaterialTableDemo() {

    const [nameError, setNameError] = useState({
        error: false,
        label: '',
        helperText: '',
    });



    const [state, setState] = React.useState({
        data: [
            {
                name: 'Mehmet',
                surname: 'Baran'
            },
            {
                name: 'Zerya Betül',
                surname: 'Baran'
            },
        ],
    });

    return (
        <MaterialTable
            title="Editable Example"
            columns={
                [
                    {
                        title: 'Name', field: 'name',
                        editComponent: (props) => (
                            <TextField
                                type="text"
                                error={nameError.error}
                                helperText={nameError.helperText}
                                value={props.value ? props.value : ''}
                                onChange={e => props.onChange(e.target.value)}
                            />
                        )
                    },
                    { title: 'Surname', field: 'surname' }
                ]}
            data={state.data}
            icons={tableIcons}
            editable={{
                onRowUpdate: (newData, oldData) =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {

                            if (newData.name === '') {
                                setNameError({
                                    error: true,
                                    label: 'required',
                                    helperText: 'Required helper text'
                                });
                                reject();
                                return;
                            }

                            resolve();
                            if (oldData) {
                                setState(prevState => {
                                    const data = [...prevState.data];
                                    data[data.indexOf(oldData)] = newData;
                                    return { ...prevState, data };
                                });
                            }
                        }, 600);
                    })
            }}
        />
    );
}

Answer 1

检查值是否存在于 labels: type: array items: type: object required: [name, value] properties: name: type: string value: type: string additionalProperties: type: string 中。

editComponent

codesandbox

Answer 2

您可以使用三元条件运算符进行修复。 示例：

const columns = [
{
  field: 'fieldName',
  title: 'fieldName Titl',
  validate: (rowData) =>
    rowData.fieldName === undefined
      ? { isValid: false, helperText: 'Name cannot be empty' }
      : rowData.fieldName === ''
      ? { isValid: false, helperText: 'Name cannot be empty' }
      : true
}