我看到了许多其他问题,这些问题与我的问题相同,并且我已经尝试了所有解决方案,但是没有用。我有一个包含许多输入的表单,我已经在FloatingLabelInputs
中对其进行了自定义。他们有一个我要调用的名为resetState
的公共方法。这是带有表单的组件的外观:
class EditModalPage extends React.Component<Props, State> {
fieldsRefs: React.RefObject<FloatingLabelInput>[] = fields.map(() => React.createRef());
render() {
return fields.map((fieldData, index) => (
<FloatingLabelInput
name={fieldData.name}
ref={this.fieldRefs[index]}
/>
));
}
}
const fields = [
{ name: 'test' }
];
从我在其他问题中看到的结果来看,这应该可行,因为我已经使用fieldsRefs
键入了React.RefObject
属性。但是事实并非如此,TypeScript给我的错误如下:
Type 'RefObject<FloatingLabelInput>' is not assignable to type 'string | (string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (RefObject<FloatingLabelInput> & string) | (RefObject<FloatingLabelInput> & ((instance: HTMLInputElement | null) => void)) | ... 5 more ... | undefined'.
Type 'RefObject<FloatingLabelInput>' is not assignable to type '((instance: FloatingLabelInput | null) => void) & RefObject<HTMLInputElement>'.
Type 'RefObject<FloatingLabelInput>' is not assignable to type '(instance: FloatingLabelInput | null) => void'.
Type 'RefObject<FloatingLabelInput>' provides no match for the signature '(instance: FloatingLabelInput | null): void'.
但是,如果我尝试console.log(this.fieldsRefs)
,则一切正常。我只是收到错误,并被强制转换为as any
。
答案 0 :(得分:0)
您应该检查<FloatingLabelInput />
组件的props接口:似乎它需要类型为RefObject<HtmlInputElement>
的引用,并且您正在尝试为其提供RefObject<FloatingLabelInput>
。
您应该尝试将类型从React.RefObject<FloatingLabelInput>
更改为React.RefObject<HtmlInputElement>
答案 1 :(得分:0)
尝试这种类型:React.MutableRefObject<HTMLInputElement | null>