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

Question

我有一个 material-table 并且我想运行对行编辑进行字段验证 仅当用户单击保存按钮时 .

我有设置错误的功能：

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

我可以设置错误，问题是如果我点击取消按钮，下次我点击编辑错误继续可见。

这是一张动图：

我试图寻找类似 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

检查editComponent中是否存在该值。

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

columns={[
  {
    title: "Name",
    field: "name",
    editComponent: props => (
    <TextField
        type="text"
        error={
        !props.value && nameError.validateInput
            ? nameError.error
            : false
        }
        helperText={
        !props.value && nameError.validateInput
            ? nameError.helperText
            : ""
        }
        value={props.value ? props.value : ""}
        onChange={e => {
        if (nameError.validateInput) {
            setNameError({
            ...nameError,
            validateInput: false
            });
        }

        props.onChange(e.target.value);
        }}
    />
    )
  },
  { title: "Surname", field: "surname" }
]}

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
}

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

React MaterialTable editable row validation - how to show and hide error?

reactjs

react-hooks

material-table