¿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?
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ónsetState
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ónonChangeHandler
, 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: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.