В настоящее время у меня есть компонент ValidatedTextField, который обертывает компонент TextField и принимает свойство validationerror, которое используется для связи между дочерним и родительским элементами и используется либо событием onChange, либо onBlur текстового поля.
Однако при передаче функции этому атрибуту я получаю следующую ошибку:
Invalid value for prop
validationerroron 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
думал, что я добавил это в readd, но в основном это закрытие для установки атрибута ошибки, если он найден в субкомпоненте (validationError: boolean) => this.setState({ HasError: validationError })





Хорошо Решено
Проблема заключалась в том, что я распространял все свойства текстового поля в компоненте, включая несуществующие атрибуты текстового поля. Экстраполяция свойств, которые мне не нужны, и только привязка свойств текстового поля по умолчанию устранила эту проблему.
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}
/>)
Что делает этот setInternalStudyNameValidationError?