ReactJs валидация поля MaterialUi onRowUpdate - PullRequest
Новая
       49

ReactJs валидация поля MaterialUi onRowUpdate

0 голосов
/ 28 января 2020

У меня есть MaterialTable, и я хочу проверить поля при редактировании строки. Например, следующий код: https://codesandbox.io/s/broken-snow-i4jbi?fontsize=14&hidenavigation=1&theme=dark

У меня есть функция setNameError 

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();
                        ...
                    }, 600);
                })

Я хочу чтобы проверить, если имя поля пустое, если оно пустое, я хочу иметь такой аспект: проверка в поле после нажатия кнопки Сохранить

Я не могу показать метку ошибки, это похоже, что setNameError внутри Promise не работает, и я не понимаю, как я могу это сделать.

1 Ответ

0 голосов
/ 09 февраля 2020

Обнаружена проблема

Я сохранял столбцы в состоянии 

const [state, setState] = React.useState({
        columns: [
            { title: 'Name', field: 'name',
                editComponent: props => (
                    <TextField
                        type="text"
                        required={true}
                        error = {nameError.error}
                        label =  {nameError.label}
                        helperText = {nameError.helperText}
                        value={props.value ? props.value : '' }
                        onChange={e => props.onChange(e.target.value)}
                    />
                )
            },
            { title: 'Surname', field: 'surname' },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
            {
                title: 'Birth Place',
                field: 'birthCity',
                lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            },
        ],
        data: [
            { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
            {
                name: 'Zerya Betül',
                surname: 'Baran',
                birthYear: 2017,
                birthCity: 34,
            },
        ],
    });

И затем передавал state.columns компоненту MaterialTable: 

 <MaterialTable
            title="Editable Example"
            columns={state.columns}
            data={state.data}
...

Решением было поместить определение столбцов в компонент MaterialTable: 

return (
        <MaterialTable
            title="Editable Example"
            columns= {[
                { title: 'Name', field: 'name',
                    editComponent: props => (
                        <TextField
                            type="text"
                            required={true}
                            error = {nameError.error}
                            label =  {nameError.label}
                            helperText = {nameError.helperText}
                            value={props.value ? props.value : '' }
                            onChange={e => props.onChange(e.target.value)}
                        />
                    )
                },
                { title: 'Surname', field: 'surname' },
                { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
                {
                    title: 'Birth Place',
                    field: 'birthCity',
                    lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
                },
            ]}
            data={state.data}
...
...