React: Para la entrada controlada, el paso no funciona como se esperaba a menos que se inicialice con nulo o "".

Creado en 6 mar. 2018  ·  6Comentarios  ·  Fuente: facebook/react

INSECTO

¿Cuál es el comportamiento actual?
Para el tipo de entrada = "número", el paso no funciona como se esperaba si hay un valor inicial establecido. El paso solo parece cumplirse si el valor inicial es "" o nulo.

Ejemplo:
https://codepen.io/anon/pen/MQMBmX

El ejemplo utiliza un valor de enlace de entrada controlado y un paso. El paso es 1/10 del valor. Si edita el valor en el cuadro de texto a 50000 y lo incrementa con el paso a paso, aumentará a 50100 (es decir, por el valor inicial y no por el paso actual).

Edite el código para que el valor inicial sea "" o nulo. Edite el cuadro de texto a 50000 y aumente: el valor va a 55000 como se esperaba.

¿Cuál es el comportamiento esperado?
Debería ser posible representar una entrada numérica que respete el paso sin tener que inicializar el valor del componente de entrada a nulo o "" primero.

Parece que cuando se proporciona un valor inicial, escribirá un atributo de valor en el DOM (por ejemplo, valor = "100"). Cuando el valor inicial es "" o nulo, solo el atributo de valor se escribe en DOM sin asignación. p. ej. (valor).

¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?

16.3.0-alpha.1 (portado a esta versión para confirmar si aún existe un problema)
0.14.7 (originalmente encontrado en esta versión)

Parece afectar solo a Chrome (Windows y Mac confirmados, versiones 59 y 64). El error no aparece en Safari (al menos en una Mac).

DOM Bug

Comentario más útil

Si. De hecho, me pregunto si deberíamos tener una línea de tiempo juntos sobre esto.

Todos 6 comentarios

Veo un comportamiento muy particular con este violín tanto en Chrome 64 en Windows 10 como en Firefox 52 en Debian. Si escribo 50000 en la entrada e inmediatamente hago clic en la flecha hacia arriba, obtengo 50100. Si escribo 50000 en la entrada, hago clic en otra parte del documento y luego hago clic en la flecha hacia arriba, obtengo 55000.

No es necesario que cambie el valor, haga clic en la flecha hacia arriba varias veces y comenzará a cambiar a números que no tienen sentido.

Gracias por el informe @andyboyne. El problema surge del hecho de que no actualizamos el atributo value en las entradas numéricas hasta que el campo está borroso. Hacemos esto para evitar un montón de comportamientos no deseados relacionados con la validación del navegador. cc @nhunzaker.

Esto debería resolverse una vez que dejemos de sincronizar el atributo value para entradas controladas https://github.com/facebook/react/issues/11896.

Si. De hecho, me pregunto si deberíamos tener una línea de tiempo juntos sobre esto.

Como mencionó un cansado, es un problema de sincronización, el campo está sincronizado cuando el campo está borroso.
Así que agregué algo de console.log y descubrí que e.target.value y e.target.getAttribute ("value") no están sincronizados mientras el campo no está borroso.
Así que una solución alternativa es agregar e.target.setAttribute ("valor", e.target.value); para forzar la actualización de este valor y luego funciona como se esperaba.

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}

No, esto sigue siendo un problema, me vuelve loco, ¡todavía no hemos simplificado las entradas controladas por v16!

¿Fue útil esta página
0 / 5 - 0 calificaciones