Question

目前，我有一个ValidatedTextField组件，该组件包装了一个TextField组件，并包含一个validationerror属性，该属性用于在子级和父级之间进行通信并由{{文本框的1}}或onChange事件。

但是，将函数传递给该属性时，出现以下错误：

道具onBlur的值无效在标签上。从元素中删除它，或者传递一个字符串或数字值以保持它在DOM中。有关详细信息，参见https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail

我已经阅读了该链接，该链接仍然可以自由传递数据和aria属性，但是切换为使用data属性会导致相同的错误。我不认为还有其他方法可以发送该函数来更新父母错误。

来自包装器

validationerror

和包装的组件

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

其他信息：到目前为止，仅在IE中没有chrome，目前在React v16.6中看不到

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

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

1 个答案: