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