开发者问题收集

useRef 不起作用 [TypeError:null 不是对象(正在评估‘filed2.current.focus’)]

2021-02-04
4918

每当键盘上按下下一个按钮时,我都会尝试将焦点放在下一个输入字段上。

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

TypeError: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,
};
2个回答

函数组件不能有 ref 实例。

React.forwardRef((props,ref) => {
  return (
      <FormInputView ref={ref}>
        <Input {...props} />
      </FormInputView>
  );
});
Dennis Vash
2021-02-04

如果 FormInputPassword 是一个功能组件,那么您需要用 [forwardRef][1] 包装它。

功能组件默认不接受 ref,因此您需要包装它,然后将 ref 转发到组件内的 DOM 组件或类组件。

Dancrumb
2021-02-04