reactjs - useRef 不起作用 [TypeError : null is not an object (evaluating 'filed2.current.focus' )]

Question

每当按下键盘上的下一个按钮时，我都会尝试将注意力集中在下一个输入字段上。

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

类型错误:null不是对象(正在评估“filed2.current.focus”)

我正在使用所有软件包的最新版本，以及带有 typescript 模板的新 react native 应用程序。

这是我到目前为止所拥有的代码:

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

函数组件不能有 ref 实例。

• React.forwardRef .
• Can I make a ref to a function component?

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