React native - 将 useRef 与 react-native-elements 库中的 Input 元素结合使用

Question

我正在 React Native 上构建一个应用程序，我正在尝试在“react-native-elements”库中的输入元素上设置 ref。

我收到以下错误：

Type 'HTMLInputElement | null' is not assignable to type 'Ref<TextInput> | undefined'.
  Type 'HTMLInputElement' is not assignable to type 'Ref<TextInput> | undefined'.
    Property 'current' is missing in type 'HTMLInputElement' but required in type 'RefObject<TextInput>'.ts(2322)
index.d.ts(89, 18): 'current' is declared here.
index.d.ts(140, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & TextInputProps & RefAttributes<TextInput> & { containerStyle?: StyleProp<ViewStyle>; ... 15 more ...; renderErrorMessage?: boolean | undefined; } & Partial<...>'

我的代码如下：

...
import { useState, useRef } from 'react'
import { Input } from 'react-native-elements'

export default function PublishRecipeScreen({ navigation }: RootTabScreenProps<'Publish a recipe'>) {
  

  const ingredientInput = useRef<null | HTMLInputElement>(null)
  const stepInput = useRef<null | HTMLInputElement>(null)


  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={styles.container}>

        <Text style={styles.title}>Ingredients:</Text>
        {recipeIngredients ? recipeIngredients.map((item, i) => <p key={i}>{item}</p>) : null}
        
        <Input
          inputContainerStyle={styles.textInput}
          placeholder='Ingredient ...'
          errorStyle={{ color: 'red' }}
          errorMessage={formHasErrors && !recipeIngredients ? 'Please provide the recipe ingredients' : undefined}
          onChangeText={(text: string) => setIngredient(text)}
          multiline = {true}
          ref={ingredientInput.current}
        />

        <TouchableOpacity onPress={() => {
          setRecipeIngredients([... recipeIngredients, ingredient])
          setIngredient('')
        }}>
          <Text>New ingredient</Text>
        </TouchableOpacity>
        
        <Text style={styles.title}>Recipe:</Text>
        {recipeSteps ? recipeSteps.map((item, i) => <p key={i}>{item}</p>) : null}

        <Input
          inputContainerStyle={styles.textInput}
          placeholder='Recipe step ...'
          errorStyle={{ color: 'red' }}
          errorMessage={formHasErrors && !recipeSteps ? 'Please provide the recipe steps' : undefined}
          onChangeText={(text: string) => setStep(text)}
          multiline = {true}
          ref={stepInput}
        />
        
        ...

我查找了元素定义如下：

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

我尝试将其用作引用类型，但也没有用。我应该使用什么作为 ref 类型，或者我该如何弄清楚？

可在此处找到完整代码：https://github.com/coccagerman/mixr

谢谢！

Answer 1

您的 TextInput 引用不是 HTMLInputElement，而是 TextInput。也许您习惯于从 Web React 中以这种方式输入它们。它们在 React Native 中是不同的。

而不是

const ingredientInput = useRef<null | HTMLInputElement>(null)
  const stepInput = useRef<null | HTMLInputElement>(null)

尝试

const ingredientInput = useRef<null | TextInput>(null)
  const stepInput = useRef<null | TextInput>(null)

一般情况下，您可以尝试使用 Typescript 错误消息中的代码。

React native - 将 useRef 与 react-native-elements 库中的 Input 元素结合使用

React native - Using useRef with Input element from react-native-elements library

typescript

react-native

react-hooks

react-native-elements

use-ref