Estoy tratando de obtener el valor de un campo de autocompletar fuera de mi componente formik cada vez que cambia, e hice algo como esto:
const formRef=useRef<any>(null); useEffect(() => { console.log("eee!!",formRef.current?.values?.flagTR) },[formRef.current?.values]); return ( <Formik initialValues={initialValues} onSubmit={handleSumbit} enableReinitialize={true} validateOnChange={true} validationSchema={ProduitSchema} innerRef={formRef} >useEffect se activa la primera vez que se procesa el componente, pero luego, cuando cambio el valor de autocompletar, useEffect no se activa. ¿Qué debo hacer para activar useEffect cada vez que cambia un valor de formik?
Oye, no creo que el enfoque con el que estás trabajando aquí vaya a funcionar, realmente no es para lo que sirve el enlace useRef.
El enfoque correcto para lo que parece que desea hacer es usar correctamente el contexto de Formik para mapearValuesToProps u obtener acceso a los valores, errores y estados de validación.
Puede usar withFormik() para configurar sus valores de formulario iniciales y mapValuesToProps. Luego puede usar dentro del componente de formulario formik's useFormikContext() que le dará acceso a valores, errores, setValues, etc.
export default withFormik({ handleSubmit: () => {}, validateOnChange: true, validateOnBlur: true, validateOnMount: true, mapPropsToValues: () => ({ name: '', email: '' }), initialValues: { name: '', email: '' } })(MyFormComponent) En MyFormComponent, puede llamar a useFormikContext() y hacer lo que quiera cuando cambien los valores.
const { setValues, values, isValid, validateForm } = useFormikContext()Si por alguna razón esto no es lo que quiere hacer, o no resuelve su problema, la única forma de lograr lo que quiere solo en React es usar Estado y establecer Estado cada vez que se cambia, por ejemplo.
const MyFormComponent = () => { const [nameField, nameMeta] = useField(name) const [emailField, emailMeta] = useField(email) const [formState, setFormState] = useState({name: '', email: ''}) return ( <Formik enableReinitialize validateOnBlur={false} initialValues={formState} onSubmit={() => {}} > {props => { const onChange = e => { const targetEl = e.target const fieldName = targetEl.name setFormState({ ...formState, [fieldName]: targetEl.value }) return props.handleChange(e) } return ( <> <input {...nameField} onChange={onChange}> <input {...emailField} onChange={onChange}> </> ) </Formik> )