React: Pour l'entrée contrôlée, l'étape ne fonctionne pas comme prévu à moins d'être initialisée avec null ou "".

Créé le 6 mars 2018 · 6Commentaires · Source: facebook/react

PUNAISE

Quel est le comportement actuel?
Pour type d'entrée = "nombre", l'étape ne fonctionne pas comme prévu si une valeur initiale est définie. L'étape ne semble être honorée que si la valeur initiale est "" ou nulle.

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

L'exemple utilise une valeur et une étape de liaison d'entrée contrôlées. Le pas correspond à 1 / 10e de la valeur. Si vous modifiez la valeur dans la zone de texte à 50000 et que vous l'incrémentez à l'aide du stepper, elle augmentera à 50100 (c'est-à-dire par la valeur initiale et non par le pas en cours).

Modifiez le code de sorte que la valeur initiale soit "" ou null. Modifiez la zone de texte à 50000 et augmentez - la valeur passe à 55000 comme prévu.

Quel est le comportement attendu?
Il devrait être possible de rendre une entrée numérique qui honore l'étape sans avoir à initialiser la valeur du composant d'entrée à null ou "" d'abord.

Il semble que lorsqu'une valeur initiale est fournie, il écrira un attribut de valeur dans le DOM (par exemple value = "100"). Lorsque la valeur initiale est "" ou nulle, alors seul l'attribut value est écrit dans le DOM sans affectation. par exemple (valeur).

Quelles versions de React et quel navigateur / système d'exploitation sont concernés par ce problème?

16.3.0-alpha.1 (porté sur cette version pour confirmer si toujours un problème)
0.14.7 (trouvé à l'origine dans cette version)

Semble affecter uniquement Chrome (Windows et Mac confirmés, versions 59 et 64). Le bogue n'apparaît pas dans Safari (sur un mac au moins).

DOM Bug

Source

andyboyne

Commentaire le plus utile

Oui. En fait, je me demande si nous devrions établir un calendrier à ce sujet.

nhunzaker le 28 mars 2018

👍3

Tous les 6 commentaires

Je constate un comportement très particulier avec ce violon dans Chrome 64 sur Windows 10 et Firefox 52 sur Debian. Si je tape 50000 dans l'entrée et clique immédiatement sur la flèche vers le haut, j'obtiens 50100. Si je tape 50000 dans l'entrée, cliquez ailleurs dans le document, puis cliquez sur la flèche vers le haut, j'obtiens 55000.

nmain le 6 mars 2018

Vous n'avez pas besoin de changer la valeur, cliquez plusieurs fois sur la flèche vers le haut et elle commence à changer pour des nombres qui n'ont pas de sens.

jmz7v le 12 mars 2018

Merci pour le rapport @andyboyne. Le problème vient du fait que nous ne mettons pas à jour l'attribut value sur les entrées numériques tant que le champ n'est pas flou. Nous faisons cela pour éviter un tas de comportements indésirables liés à la validation du navigateur. cc @nhunzaker.

Cela devrait être résolu une fois que nous aurons finalement arrêté la synchronisation de l'attribut value pour les entrées contrôlées https://github.com/facebook/react/issues/11896.

aweary le 28 mars 2018

Oui. En fait, je me demande si nous devrions établir un calendrier à ce sujet.

nhunzaker le 28 mars 2018

👍3

Comme mentionné, il s'agit d'un problème de synchronisation, le champ est synchronisé lorsque le champ est flou.
J'ai donc ajouté un peu de console.log et j'ai compris que e.target.value et e.target.getAttribute ("value") ne sont pas synchronisés alors que le champ n'est pas flou.
Une solution de contournement consiste donc à ajouter e.target.setAttribute ("value", e.target.value); pour forcer à mettre à jour cette valeur, puis cela fonctionne comme prévu.

       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});
      }}