Solución:
React-final-form maneja esta funcionalidad con un pequeño paquete externo.
Básicamente, es un componente adicional para agregar dentro del formulario que se une al elemento que usa su nombre:
<Field name="foo" component="input" type="checkbox" />
<OnChange name="foo">
{(value, previous) => {
// do something
}}
</OnChange>
La documentación actual se puede encontrar aquí:
https://github.com/final-form/react-final-form-listeners#onchange
No he usado redux-form, pero agregué un contenedor súper simple alrededor del componente Field para escuchar onChange de esta manera:
const Input = props => {
const {
name,
validate,
onChange,
...rest
} = props;
return (
<Field name={name} validate={validate}>
{({input, meta}) => {
return (
<input
{...input}
{...rest}
onChange={(e) => {
input.onChange(e); //final-form's onChange
if (onChange) { //props.onChange
onChange(e);
}
}}
/>
)}}
</Field>
);
};
La idea bajo la detección de cambios es suscribirse a los cambios de valor de Field y llama a tu costumbre onChange manejador cuando el valor realmente cambia. Preparé un ejemplo simplificado donde puedes verlo en acción. Los detalles están en MyField.js expediente.
Como resultado, puede usarlo como con redux-form:
<MyField
component="input"
name="firstName"
onChange={(val, prevVal) => console.log(val, prevVal)}
/>