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

很遗憾，React Native（link to Github issue）尚不支持此功能。那是在2018年，到2019年5月，情况还是一样。

如果您没有运行最新版本，则可以尝试使用最新版本的React Native，看看是否有效，如果有人可以确认的话。

Answer 2

我想我解决了这个问题看到下面的代码

App.js文件：

import Input from './component/Input.js'
export default ({navigation}) => {
  const inputEmail = useRef(null);
  const inputPassword = useRef(null);
 const updateRef = ref => {
    inputPassword.current = ref.current;
  };
return (
<View style={[signInScrStyle.container]}>
<Input
              placeholder={'Email Address'}
              onSubmitEditing={() => {
                inputPassword.current.focus();
              }}
              updateRef={e => {
                updateRef(e);
              }}
              ref={inputEmail}
            />
<Input
              placeholder={'Password'}
             onSubmitEditing={() => {
                inputEmail.current.focus();
              }}
              updateRef={e => {
                updateRef(e);
              }}
              ref={inputPassword}
            />
</View>
);
}

input.js文件：

export const Input = props => {
  const myRef = useRef(null);

  useEffect(() => {
    console.log(myRef);
    props.updateRef(myRef);

    return () => {};
  }, []);

  return (
  <View style={style.txtInputContainer}>
<TextInput
        style={style.txtInput}
        // onChangeText={text => onChangeText(text)}
        numberOfLines={1}
        autoCorrect={false}
        autoCapitalize={'none'}
        placeholder={props.placeholder}
        placeholderTextColor={'#fff'}
        onSubmitEditing={() => {
          props.onSubmitEditing();
        }}
        ref={myRef}

      />
</View>
);
}

Answer 3

您可以尝试

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

export default function Login() {
  let usernameRef = React.createRef();
  let passwordRef = React.createRef();

  return (
    <View>
      <TextInput ref={usernameRef} onNextField={() => passwordRef.current.focus()} />
      <TextInput ref={passwordRef} />
    </View>
  )
}

React Native-功能组件上的useRef警告

3 个答案: