React Native - 函数组件上的 useRef 警告

Question

我有一个简单的函数组件，需要使用输入引用来设置正确的提交焦点：

import React, { useRef } from 'react'
import { View, TextInput } from 'react-native'

export default function Login() {
  let usernameRef = useRef(null)
  let passwordRef = useRef(null)

  return (
    <View>
      <TextInput ref={usernameRef} />
      <TextInput ref={passwordRef} />
    </View>
  )
}

问题是在新的 Hooks API 中使用 ref 仍然会发出警告：

警告：不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？

我不想使用类。尝试使用“forwardRef”并且警告仍然存在：

import React, { createRef, forwardRef } from 'react'
import { View, TextInput } from 'react-native'

export default function Login() {
  let usernameRef = createRef()
  let passwordRef = createRef()
  const Input = forwardRef((props, ref) => (
    <TextInput ref={ref} {...props} />
  ))

  return (
    <View>
      <Input ref={usernameRef} />
      <Input ref={passwordRef} />
    </View>
  )
}

我做错了什么？

Answer 1

import React from 'react'
import { View, TextInput } from 'react-native'

const usernameRef = React.createRef();
const passwordRef = React.createRef();

export default function Login() {
  return (
    <View style={{flex: 1 , justifyContent: "center", alignItems: "center"}}>
      <TextInput ref={usernameRef} onSubmitEditing={() => passwordRef.current.focus()} placeholder="First" />
      <TextInput ref={passwordRef} placeholder="second" />
    </View>
  )
}

这里有小吃