React Controlled Forms se rompe con la función onChange.
Tengo un formulario, con un valor predeterminado que puede ser modificado. Cuando se produce un cambio, el formulario debe actualizar el estado, así como emitir un evento (y más, pero lo he omitido aquí). Considere este código:
const onFormChangeTest = (event) => {
setName(event.target.value);
eventDispatch({type: ACTION.TOGGLE_SAVE_BTN, payload: false});
};
return (
El código anterior no logra actualizar el valor en el formulario. O mejor dicho, el cuadro de entrada “namebox” se restablece al valor inicial tan pronto como dejo de escribir.
Si, por otro lado, elimino la línea eventDispatch de la función onFormChangeTest, entonces funciona (pero no puedo activar mi despachador).
const onFormChangeTest = (event) => {
setName(event.target.value);
};
return (
El formulario funciona, pero solo puedo llamar a useState y nada más:
¿Puedo hacer solo una cosa en onChange?
EDITAR: el código reductor se ve así:
export const initialState = {
saveChangesBtn: true,
};
export const ACTION = {
TOGGLESAVEBTN: “toggle-save-button”,
};
export const reducer = (state, action) => {
switch (action.type) {
… (otros estados) …
case ACTION.TOGGLESAVEBTN:
return { …state, saveChangesBtn: action.payload };
}
};
davy.ai
No, puedes hacer más de una cosa en
onChange
. El problema probablemente esté en el código de reducción. Asegúrate de que eltipo de acción
sea correcto y que elcarga de acción
sea el valor correcto.