类型 'Handles' 缺少类型 'TextInput' 的以下属性

Question

我使用 React Native Paper and react-native-text-input-mask 显示 phone 号码的字段：

// Imports
import {TextInput} from 'react-native-paper'
import TextInputMask from 'react-native-text-input-mask'

// Control
<TextInput
  label="Phone"
  style={styles.formControl}
  render={props => (
    <TextInputMask
      {...props}
      mask={'+1 ([000]) [000] [00] [00]'}
      onChangeText={onPhoneChanged}
    />
  )}
/>

// Callback
const onPhoneChanged = (
  formatted: string,
  extracted: string | undefined,
) => {
  setPhone(extracted ?? '')
}

但是，它失败并出现错误：

Type '{ mask: string; onChangeText: (formatted: string, extracted: string | undefined) => void; ref: (a?: TextInput | null | undefined) => void; placeholder?: string | undefined; ... 10 more ...; adjustsFontSizeToFit?: boolean | undefined; }' is not assignable to type 'RefAttributes<Handles>'.
  Types of property 'ref' are incompatible.
    Type '(a?: TextInput | null | undefined) => void' is not assignable to type 'Ref<Handles> | undefined'.
      Type '(a?: TextInput | null | undefined) => void' is not assignable to type '(instance: Handles | null) => void'.
        Types of parameters 'a' and 'instance' are incompatible.
          Type 'Handles | null' is not assignable to type 'TextInput | null | undefined'.
            Type 'Handles' is missing the following properties from type 'TextInput': isFocused, clear, measure, measureInWindow, and 17 more.ts(2322)

我尝试删除 props 但控件无法正常工作。

如何解决？

Answer 1

我刚刚运行陷入完全相同的错误。问题是当我在制作自己的组件时包装 TextInput 时，它建议我这样做

(render: RenderProps) => React.ReactNode

但你真正想要的是：

(textInputProps: TextInputProps) => React.ReactNode

这解决了我的问题，并且在我进行更改后一切正常

类型 'Handles' 缺少类型 'TextInput' 的以下属性

Type 'Handles' is missing the following properties from type 'TextInput'

typescript

react-native

react-native-paper

react-native-text-input-mask