J'ai un noeud de texte édité manuellement dans le DOM qui n'est pas mis à jour en réagissant lorsque la méthode Pour démontrer l'exemple de l'exemple du fonctionnaire réactez le site Web : p> p> rendu () code> est appelée.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="todos-example"></div>
3 Réponses :
Vous avez ce problème car réagi a un DOM virtuel où il compare les modifications. Lorsque vous modifiez le vrai DOM, réagir ne sait pas que vous l'avez modifié, alors lorsqu'il compare son DOM virtuel avec le nouveau rendu Si vous avez le contrôle sur tout le HTML dans vos compteurs de réaction, ne modifiez pas le DOM directement, jamais. Vous devez ajouter des auditeurs d'événements sur les actions utilisateur (KeyPress dans ce cas) pour les attraper et mettre à jour l'état du composant en conséquence. Si vous le faites, vous devez comprendre comment réagit à réagir des travaux de Dom virtuels . () voir aucun changement pour cet élément, de sorte que ce n'est pas re-rendu. .
Devrais-je trouver un autre moyen de fournir à l'utilisateur un moyen de modifier le texte? Je définit actuellement l'élément comme éditable lorsque l'utilisateur clique sur un bouton d'édition, si l'utilisateur annule la modification, je souhaite revenir à la valeur précédente que je fais actuellement manuellement en définissant le innertext Propriété de cet élément qui n'est pas une solution élégante.
Oui, comme je l'ai dit, vous devez compter sur les événements utilisateur, en tant que porte-clés, clés, porte-clés, focus, flou et tels. Vous avez beaucoup à chercher. Ce que vous cherchez en réalité, c'est pour «contentement de réagir», ce que je suis sûr que je suis sûr déjà demandé et répondit ici.
Si Alors, je crois que vous pouvez faire la même chose que vous faites - mais "réagir de façon", pas manuellement. Streastvise, quel est le point d'utiliser réagir?
Si contesté est "DOIT avoir" (vous ne pouvez pas basculer entre div et zone texte), si j'étais vous - ajoutera:
état ou Les accessoires reste inchangé - le composant ne sera pas rendu. Donc, votre édition manuelle doit mettre à jour certains Etat si vous souhaitez que le composant soit rendu.
Edit
temedit pour indiquer ou sélectionné - Si vous devez conserver un objet dans cette partie de l'état. Si vous choisissez un objet, vous pouvez également utiliser le texte d'origine, ce que vous pouvez utiliser ce dernier si l'utilisateur choisit d'annuler l'édition
onblur Utilisez-le pour revenir du texte dans l'élément modifié
Oui, vous avez raison de le faire la "façon de réagir", j'ai mis à jour ma question avec la raison pour laquelle je fais cela, je souhaite que l'utilisateur modifie le texte directement, mais revenir à l'ancien texte si l'utilisateur annule cette action. .
J'ai résolu ceci à l'aide de l'attribut d'attribut à la force pour réagir pour recréer l'élément DOM, je ne sais pas si c'est le meilleur moyen, mais c'est la manière la plus propre que j'ai trouvée que Permettez-moi de rétablir le texte d'un J'ai un Ceci a un inconvénient, réagira réacquera l'élément sur chaque changement de finalement élément contentimé lorsque l'utilisateur annule l'édition après avoir changé le texte. modifier propriété que je bascule pour faire l'élément modifiable , donc j'ai ajouté une touche avec la valeur de chaîne de cette propriété: edit état. contestable n'est pas la meilleure solution pour tous les cas, mais lorsque vous devez fournir une solution d'édition sans ajouter Nouveaux éléments Cela peut faire le travail.
En effet, même si
todoliste est modifié, l'ancien n'est pas re-rendu car leurs clés sont identiques.