Quiero habilitar el nombre del botón a continuación completeSubmissionButton solo cuando el valor de la variable isSaving cambió de "inProgress" a "Saved". No estoy seguro de cómo hacerlo? Según la condición a continuación, el foco del botón está habilitado cuando el estado del formulario está en progreso y el formulario es válido, pero quiero habilitarlo solo cuando el formulario es válido y el estado del formulario cambia de en progreso a guardado y el foco debe habilitarse una vez. El problema que tengo es que cuando el formulario es editable (es decir, en progreso), siempre mueve el foco para completar el botón y no puedo editar el botón de texto actual
console.log("isSaving", isSaving); //values are isProgress or Saved or idle console.log("isFormValid", isFormValid); // true or false useEffect(() => { if( completeSubmissionButton?.current && isSaving === SAVING_STATUS.IN_PROGRESS && isFormValid){ completeSubmissionButton.current.focus(); } });En este momento, su condición verifica si isSaving === SAVING_STATUS.IN_PROGRESS .
En su lugar, desea verificar si isSaving === SAVING_STATUS.SAVED y otra condición para informarle si acaba de cambiar de en progreso a guardado.
Puede tener otra variable para anotar cuál era el estado anterior. Entonces puede verificar isSaving === SAVING_STATUS.SAVED && isSavingPrev === SAVING_STATUS.IN_PROGRESS .
Alternativamente, podría crear una condición solo para el focus() como
if(wheneverYourIsSavingGoesFromProgressToSaved) { isSaving = SAVING_STATUS.SAVED; focusButton = true; } ... useEffect(() => { if(completeSubmissionButton?.current && focusButton && isFormValid){ completeSubmissionButton.current.focus(); focusButton = false; } })