Предупреждение при передаче функции обернутому компоненту

В настоящее время у меня есть компонент ValidatedTextField, который обертывает компонент TextField и принимает свойство validationerror, которое используется для связи между дочерним и родительским элементами и используется либо событием onChange, либо onBlur текстового поля.

Однако при передаче функции этому атрибуту я получаю следующую ошибку:

Invalid value for prop validationerror on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail

Я прочитал ссылку, в которой говорится, что атрибуты данных и арии по-прежнему могут передаваться свободно, однако переключение на использование атрибута данных приводит к той же ошибке. Я не могу придумать, как еще отправить функцию для обновления ошибки родителей обратно.

Из обертки

<ValidatedTextField
    type = "text"
    variant = "standard"
    required = {true}
    validateon = {'onChange'}
    validate = {[Validations.Required, Validations.allowedNameCharacters]}
    validationerror = {(validationError: boolean) => this.setState({ HasError: validationError }) }
    onChange = {(event: any) => this.setState({ textboxvalue: event.target.value })}
    value = {this.state.textboxvalue}
/>

и завернутый компонент

import * as React from 'react';
import * as _ from 'lodash'
import { IValidationItem } from '../../../Interfaces/IValidationItem'
import TextField, { TextFieldProps } from "@material-ui/core/TextField";

interface IValidatedTextFieldProps {
    validate?: IValidationItem[],
    validateon?: 'onBlur' | 'onChange',
    validationerror?: (hasError?: boolean) => void
}

interface IValidatedTextFieldState {
    validationErrorMessage: string,
    validationError: boolean
}


type ValidatedTextFieldAllProps = IValidatedTextFieldProps & TextFieldProps

class ValidatedTextField extends React.Component<ValidatedTextFieldAllProps, IValidatedTextFieldState> {

    public constructor(props: ValidatedTextFieldAllProps) {
        super(props);
        this.state = {
            validationErrorMessage: "",
            validationError: false
        }
    }
    public validationWrapper = (event: any) => {

        const { validate, } = this.props;
        return !validate ? "" : _.forEach(validate, (validationItem: IValidationItem) => {
            const result = !validationItem.func(event.target.value)

            if (result) {
                this.setState({ validationErrorMessage: validationItem.validationMessage });
                this.setState({ validationError: result })
                this.callParentValidationErrorMethod(result)
                return false;
            }
            else {
                this.setState({ validationErrorMessage: "" });
                this.setState({ validationError: result })
                this.callParentValidationErrorMethod(result)
                return;
            }
        });
    };

    public onBlurValidation = (event: any) => {
        const { onBlur, validateon, validate } = this.props;
        if (_.isFunction(onBlur)) { onBlur(event); }
        if (validateon === "onBlur" && !!validate) { this.validationWrapper(event); 
    }

    public onChangeValidation = (event: any) => {
        const { onChange, validateon, validate } = this.props;
        if (_.isFunction(onChange)) { onChange(event); }
        if (validateon === "onChange" && !!validate) { this.validationWrapper(event); };
    }
    public callParentValidationErrorMethod = (hasError: boolean) => {
        if (_.isFunction(this.props.validationerror)) {
            this.props.validationerror(hasError);
        }
    }

    public render() {
        const { validationErrorMessage, validationError } = this.state


        return (<TextField
            {...this.props}
            onBlur = {(event: any) => { this.onBlurValidation(event); }}
            onChange = {(event: any) => { this.onChangeValidation(event); }
            }
            error = {validationError}
            helperText = {validationErrorMessage}
        />)
    }
}

export default ValidatedTextField;

Дополнительная информация: Пока не видно в IE только в хроме и в настоящее время React v16.6

Что делает этот setInternalStudyNameValidationError?

Hemadri Dasari 07.02.2019 18:52

думал, что я добавил это в readd, но в основном это закрытие для установки атрибута ошибки, если он найден в субкомпоненте (validationError: boolean) => this.setState({ HasError: validationError })

SCFi 07.02.2019 18:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
2
2 096
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо Решено

Проблема заключалась в том, что я распространял все свойства текстового поля в компоненте, включая несуществующие атрибуты текстового поля. Экстраполяция свойств, которые мне не нужны, и только привязка свойств текстового поля по умолчанию устранила эту проблему.

const {validationerror,validate,validateon, ...textFieldProps   } = this.props;
       return (<TextField
           {...textFieldProps}
           onBlur = {(event: any) => { this.onBlurValidation(event); }}
           onChange = {(event: any) => { this.onChangeValidation(event); }
           }
           error = {validationError}
           helperText = {validationErrorMessage}
       />)

Другие вопросы по теме