How to access input reference from another file using Unform?

August 8, 2023

I’m trying to use unform with the following structure:

Component/inputRadio.ts:

export const TextInputInput: React.FC<TextInputInputProps> = ({ name, ...props }) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const { fieldName, registerField } = useField(name!);

    useEffect(() => {
        registerField({
            name: fieldName,
            ref: inputRef.current,
            path: 'value',
        });
    }, [fieldName, registerField]);
        
    return(
        <InputCss ref={inputRef} className={clsx(InputCss)} {...props} />
    )
}

In another file this is my submit function:

const Login: React.FC = () => {
const formRef = useRef<FormHandles>(null);

const handleSubmit = useCallback(
    async (data: SignInFormData) => { 
      try {    
        console.log(data);
      } catch (err) {    
        console.log(err);
      }
    },
    [],
);

return(

        <Form ref={formRef} onSubmit={handleSubmit} >
                    <TextInputInput 
                        type='text'  
                        id="text" 
                        name='cpf'
                        placeholder='000.000.000-00' 
                    />

                    <FormatedTextInput 
                        type="password" 
                        id='password'
                        name='password'
                        placeholder='********'
                    />
            <Button type='submit'>Entrar</Button>
        </Form>
    )
}

export default Login;

how can I manipulate the value outside the component? I’m already using useRef inside the component with this "standard" Unform structure. How do you change or get the value in another file import?

specifically I want to get one field value when click in another button, this before the submit function.

I dont want to use document.getElementById().