Question

0

411

Vistas

En Blazor, ¿hay alguna manera de deshacer la entrada de usuario no válida sin cambiar el estado?

En Blazor, ¿cómo puedo deshacer una entrada de usuario no válida sin cambiar el estado del componente para activar una nueva representación?

Aquí hay un ejemplo simple de contador de Blazor ( pruébelo en línea ):

 <label>Count:</label> <button @onclick=Increment>@count times!</button><br> A: <input @oninput=OnChange value="@count"><br> B: <input @bind-value=count @bind-value:event="oninput"> @code { int count = 1; void Increment() => count++; void OnChange(ChangeEventArgs e) { var userValue = e.Value?.ToString(); if (int.TryParse(userValue, out var v)) { count = v; } else { if (String.IsNullOrWhiteSpace(userValue)) { count = 0; } // if count hasn't changed here, // I want to re-render "A" // this doesn't work e.Value = count.ToString(); // this doesn't work either StateHasChanged(); } } }

Para el elemento de input A, quiero replicar el comportamiento del elemento de input B, pero sin usar los atributos de enlace de datos de estilo bind-xxx .

Por ejemplo, cuando 123x dentro de A, quiero que vuelva a 123 automáticamente, como sucede con B.

StateHasChanged pero no funciona, supongo, porque la propiedad de count en realidad no cambia.

Entonces, básicamente necesito volver a renderizar A para deshacer la entrada de usuario no válida, aunque el estado no haya cambiado. ¿Cómo puedo hacer eso sin la magia bind-xxx ?

Claro, bind-xxx es excelente, pero hay casos en los que se puede desear un comportamiento no estándar, construido alrededor de un controlador de eventos administrado como ChangeEvent .

Actualizado , para comparar, así es como podría haberlo hecho en React ( pruébelo en línea ):

 function App() { let [count, setCount] = useState(1); const handleClick = () => setCount((count) => count + 1); const handleChange = (e) => { const userValue = e.target.value; let newValue = userValue ? parseInt(userValue) : 0; if (isNaN(newValue)) newValue = count; // re-render even when count hasn't changed setCount(newValue); }; return ( <> Count: <button onClick={handleClick}>{count}</button><br/> A: <input value={count} onInput={handleChange}/><br/> </> ); }

Además, así es como podría haberlo hecho en Svelte, que me parece conceptualmente muy parecido a Blazor ( pruébelo en línea ).

 <script> let count = 1; const handleClick = () => count++; const handleChange = e => { const userValue = e.target.value; let newValue = userValue? parseInt(userValue): 0; if (isNaN(newValue)) newValue = count; if (newValue === count) e.target.value = count; // undo user input else count = newValue; } }; </script> Count: <button on:click={handleClick}>{count}</button><br/> A: <input value={count} on:input={handleChange}/><br/>

Actualizado , para aclarar, simplemente quiero deshacer lo que considere una entrada no válida, retrospectivamente después de que haya sucedido, al manejar el evento de cambio, sin mutar el estado del componente en sí ( counter aquí).

Es decir, sin el enlace de datos bidireccional específico de Blazor, el type=number o los atributos de coincidencia de patrones. Simplemente uso el requisito de formato de número aquí como ejemplo; Quiero poder deshacer cualquier entrada arbitraria como esa.

La experiencia de usuario que quiero (hecha a través de un truco de interoperabilidad JS): https://blazorrepl.telerik.com/wPbvcvvi128Qtzvu03

Me sorprendió que esto fuera tan difícil en Blazor en comparación con otros marcos, y que no puedo usar StateHasChanged para simplemente forzar una nueva representación del componente en su estado actual.

over 4 years ago · Santiago Trujillo

6 Respuestas

Responde la pregunta

0

Deberá usar @on{DOM EVENT}-preventDefault .

Viene del mundo de JavaScript y evita el comportamiento predeterminado del botón.

En blazor y razor, la validación o DDL activa la devolución de datos, lo que significa que el servidor procesa la solicitud y se vuelve a procesar.

Al hacer esto, debe asegurarse de que su evento no "burbujee", ya que está impidiendo que el evento realice una devolución de datos.

Si encuentra que su evento burbujea, lo que significa que el evento del elemento sube a los elementos en los que está anidado, use:

stopPropagation="true";

para más información:

Supresión de eventos en blazor