es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿La activación de cambio está produciéndose pero solo se está ejecutando la mitad de la función?

Estoy intentando validar un campo de entrada para direcciones de correo electrónico. La validación real funciona, la actualización del estado y todo lo relacionado con ella funciona. Sin embargo, noté un comportamiento extraño una vez que se valida un correo electrónico falso.

NOTA: Cambié el nombre de mis estados y atributos para que fueran más genéricos y legibles.

react
<TextField
label = {emailFieldAttributes.label}
type = {emailFieldAttributes.type}
onChange = { event => {
onChangeHandler(event)
}}
id = {emailFieldAttributes.id}
value = {state.value_email}
InputProps = {{
autoComplete: 'off',
inputMode: &##39;string'
}}
error = {state.error.value}
ref = {ref}

</TextField>

function onChangeHandler(event)
    {
        if (event.target.id.includes('cc'))
        {
            setState({...state, value<em>cc: event.target.value});
        }
        else if (event.target.id.includes('body'))
        {
            setState({...state, value</em>body: event.target.value});
        }
        else
        {
            setState({...state, value_email: event.target.value});
        }
    }

    if (state.error != initialErrorState
    )
    {
        resetEmailTooltip();
    }
}

react
function resetEmailTooltip()
{
setEmailStateValues(
{
…state,
error: resetErrorState
});
}

En el botón de enviar, ejecuto la validación y funciona, ya que actualiza correctamente el estado y muestra una información sobre herramientas. De hecho, onChange funciona como se supone que debe hacerlo, excepto por un pequeño comportamiento no deseado. Cada vez que una validación devuelve false y actualiza el state.error, se muestra una información sobre herramientas. La próxima vez que se haga un cambio en el campo de entrada, el primer evento solo activa resetEmailTooltip() y no actualiza el valor del estado.

Paso a paso – comportamiento actual
1. Agregar dirección de correo electrónico con formato incorrecto: ‘test@.test’
2. Presionar enviar
3. Validación
4. Información sobre herramientas mostrada
5. El primer cambio en el campo de entrada presionando, por ejemplo, ‘b’ en el teclado conduce a la eliminación de la información sobre herramientas
6. El segundo evento de presionar ‘b’ conduciría a ‘test@b.test’

Paso a paso – comportamiento deseado
1. Agregar dirección de correo electrónico con formato incorrecto: ‘test@.test’
2. Presionar enviar
3. Validación
4. Información sobre herramientas mostrada
5. El primer cambio en el campo de entrada presionando, por ejemplo, ‘b’ en el teclado conduce a la eliminación de la información sobre herramientas y lleva a ‘test@b.test’

Lo que no entiendo es por qué se necesita un segundo evento para activar la actualización del estado. ¿Tengo algo mal en mi proceso de pensamiento cuando se trata de cómo se activa onChange?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    El problema parece estar en el orden de los eventos que se disparan. En el comportamiento actual, el primer cambio en el campo de entrada después de que se muestra la información sobre herramientas (tooltip) solo dispara la función resetEmailTooltip() y no actualiza el valor del estado. Esto podría deberse a que la función setState es asíncrona y tarda algún tiempo en actualizar el estado.

    Para lograr el comportamiento deseado, es posible que desee llamar a la función resetEmailTooltip() en la propia función onChangeHandler, después de actualizar el estado. Esto asegura que la información sobre herramientas (tooltip) se elimine y que el estado se actualice en el mismo ciclo de eventos.

    Aquí hay una función onChangeHandler actualizada:

    function onChangeHandler(event) {
      if (event.target.id.includes('cc')) {
        setState({ ...state, value_cc: event.target.value });
      } else if (event.target.id.includes('body')) {
        setState({ ...state, value_body: event.target.value });
      } else {
        setState({ ...state, value_email: event.target.value });
      }
    
      if (state.error !== initialErrorState) {
        resetEmailTooltip();
      }
    }
    
    function resetEmailTooltip() {
      setEmailStateValues({
        ...state,
        error: resetErrorState,
      });
    }
    

    Esto debería actualizar el estado y eliminar la información sobre herramientas (tooltip) en el mismo ciclo de eventos, asegurando que se logre el comportamiento deseado.

Comments are closed.