Estoy creando un componente personalizado básico para el enmascaramiento de entrada (¡haciendo el mío!), que devuelve un campo de entrada para un formulario.

 import React, { useState, useEffect, useRef } from "react"; import mask from "./mask"; const InputMask = props => { let { field, register, type, inputMaskType, defaultValue } = props; const inputField = useRef(); const [fieldValue, setFieldValue] = useState(""); const onInputLoad = () => { setFieldValue(mask.maskShortDateOnLoad({ inputField, defaultValue })); }; const onInputChange = () => { setFieldValue(mask.maskInput({ type: inputMaskType, inputField, defaultValue })); }; useEffect(() => { onInputLoad(); }, []); return ( <> <input {...register(field)} ref={inputField} type={type} onChange={onInputChange} value={fieldValue || ""} /> </> ); }; export default InputMask;

Usado así, en el componente padre, en la forma:

 <InputMask type="text" field="from_date" register={register} inputMaskType={inputMaskType.SHORT_DATE} defaultValue={selectedEntity.from_date} />

Es vinculante para el campo cuando se carga el formulario, porque el campo registrado está leyendo los datos. Aparece. Sin embargo, al guardar, los datos del campo personalizado no se actualizan. Sigue siendo el mismo que cuando se cargó por primera vez.

Mirándolo en las herramientas de desarrollo, tiene la propiedad de "nombre" correcta en la etiqueta y se parece a todos los demás en el formulario.

¡Supongo que no lo entiendo! Es una entrada anidada en otro componente y se registra como cualquier otra entrada en el formulario. Estoy pasando el registro y haciendo lo que se supone que debo hacer. ¿El cambio de estado se está recargando con los datos antiguos? ¿Me veré obligado a usar un controlador? Si es así... ¿cómo en este caso? ¿Qué estoy haciendo mal?