useRef not working [TypeError: null is not an object (evaluating 'filed2.current.focus')]

Question

每当按下键盘上的下一个按钮时，我都试图专注于下一个输入字段。

从 React Native 文档中我了解到我们需要使用 useRef 挂钩。但是按照文档

TypeError: null is not an object (evaluating 'filed2.current.focus')

我使用的是所有软件包的最新版本，以及带有打字稿模板的新 React 本机应用程序。

这是我目前拥有的一些代码：

import React, {useRef} from 'react';

...

  const filed1 = useRef(null);
  const filed2 = useRef(null);

  const onButtonClick = () => {
    filed2.current.focus();
  };

  return (
    <>
      <FormInputPassword
        ref={filed1}
        returnKeyType="next"
        onSubmitEditing={onButtonClick}
        blurOnSubmit={false}
      />
      <FormInputPassword
        ref={filed2}
        returnKeyType="done"
        blurOnSubmit={false}
      />
    </ >
  );

编辑：


function FormInputPassword(props) {
  return (
      <FormInputView>
        <Input {...props} />
      </FormInputView>
  );
}


FormInputPassword.defaultProps = {
  blurOnSubmit: true,
  autoCorrect: false,
  editable: true,
};

Answer 1

如果FormInputPassword是一个功能组件，那么你需要用[forwardRef][1]包裹它。

函数式组件默认不接收 refs，因此您需要对其进行包装，然后将 ref 转发给组件内的 DOM 组件或 class 组件。

Answer 2

函数组件不能有 ref 实例。

React.forwardRef((props,ref) => {
  return (
      <FormInputView ref={ref}>
        <Input {...props} />
      </FormInputView>
  );
});

useRef not working [TypeError: null is not an object (evaluating 'filed2.current.focus')]

useRef not working [TypeError: null is not an object (evaluating 'filed2.current.focus')]

ref

typescript

reactjs

use-ref