gpt4 book ai didi

reactjs - 将函数传递给包装的组件 Prop 时发出警告

转载 作者:行者123 更新时间:2023-12-04 13:20:02 31 4
gpt4 key购买 nike

目前我有一个 ValidatedTextField 组件,它包装了一个 TextField 组件,并接受了一个 validationerror 属性,该属性用于在子进程之间进行通信和父级,并由文本框的 onChangeonBlur 事件使用。

然而,当将一个函数传递给这个属性时,我收到以下错误:

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

我已经阅读了链接,上面说数据和 aria 属性仍然可以自由传递,但是切换到使用数据属性会导致同样的错误。我想不出还有什么方法可以发送函数来更新父错误。

来自包装器

<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 中仅 chrome 和当前 React v16.6 中未见

最佳答案

好的解决了

问题是我在组件的文本字段上传播所有属性,包括文本字段上不存在的属性。外推我不需要的属性并仅绑定(bind)默认文本字段属性解决了这个问题

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

关于reactjs - 将函数传递给包装的组件 Prop 时发出警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54579339/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com