“输入”类型上不存在属性“模糊”

Question

I am using the useRef hook to pass a ref property into my custom FieldInput component. This is then used for the validation of my form.

const fieldRef = useRef();
...
    const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
 ....
    fieldRef.current.blur();
    helpers.resetForm();
  };

However, I get an error on fieldRef.current that Object is possibly 'undefined'. . In order to fix that, I made these changes:

const fieldRef = useRef<Input>(null);
...
fieldRef.current?.blur();

However, I still get an error that Property 'blur' does not exist on type 'Input'. . Here, Input is imported from native-base. Due to this, I get type errors/warnings when I submit the form. An unhandled error was caught from submitForm() How can I get rid of these errors?

The full scenario is replicated here in a codesandbox : https://snack.expo.io/@nhammad/jealous-beef-jerky-fix

Answer 1

Ok, so first of all, in your FieldInput component, you passed those event handlers to Input like this : <Input onCahnge={callback()}/> , instead of doing it like this : <Input onChange={()=>callback()}/> . Instead of passing your callbacks, you called them and passed in their result as the event handlers. This caused an error in your component.

After fixing that and getting type hints working, blur was still signaled by the editor as missing from type Input . After looking over the docs, and trying to console log the ref element, it seems like there is actually no blur method exposed. TextField from react-native has it exposed, but is not forwarded to native-base Input