#react #programowanie #javascript
Czy istnieje w React odpowiednik...
Chodzi o zmianę miejsca elementu, ale nie poprzez klonowanie ani tworzenie na nowo identycznego elementu, a faktyczne przeniesienie elementu.
Tak jak tutaj w VaniliaJS:
https://vw36m.csb.app/
Jak kliknąć "More", to element "Widget" przenosi się z
Jeśli takie coś istnieje w react to jak się nazywa?
(ja mam pomysł na API, jak takie coś można by robić w deklaratywnym stylu, w JSX, ale może jednak już istnieje?)
Czy istnieje w React odpowiednik...
element.append/before/after?Chodzi o zmianę miejsca elementu, ale nie poprzez klonowanie ani tworzenie na nowo identycznego elementu, a faktyczne przeniesienie elementu.
Tak jak tutaj w VaniliaJS:
https://vw36m.csb.app/
Jak kliknąć "More", to element "Widget" przenosi się z
article bo body i z powrotem - ten sam element, bez żadnego szwenku - z użyciem element.append.Jeśli takie coś istnieje w react to jak się nazywa?
(ja mam pomysł na API, jak takie coś można by robić w deklaratywnym stylu, w JSX, ale może jednak już istnieje?)
- Najlepsze
- Wszystkie komentarze
Zobacz sobie dokumentacje replaceWith i odnośnik do specyfikacji. Zamieniając te elementy, usuwasz je z drzewa DOMu i dodajesz je z powrotem z dodaną referencją
https://dom.spec.whatwg.org/#concept-node-replace
W reakcie załatwiasz to stanem/contextem/reduxem, czymkolwiek.
W Chrome ze zwykłym event
input, historia cofania (Ctrl+Z) i tak jest zapamiętywana.Czyli to kwestia wyłącznie Firefoksa, że przy
element.append/replaceWithhistoria jest przerywana.Musze zgłosić
Komentarz usunięty przez moderatora
Ten sam element ma się przenosić w różne miejsca w DOM, a nie tworzyć i znikać inny ale identyczny.
Komentarz usunięty przez moderatora
Wtedy by trzeba zawartość zapisywać na zewnątrz i przypisywać... Mnóstwo niepotrzebnej pracy.
Ale jak nie wiesz czy takie rozwiązanie istnieje to trudno. No chyba że wiesz, że nie istnieje?
Komentarz usunięty przez autora
+ możesz takie coś animować cssem
+ lecisz z useState lub reduxa mapę state to props
+ powinno być wydajniejsze
- masz więcej DOMu
Komentarz usunięty przez moderatora
Szukam sytuacji, gdzie to nie wystarczy...
Może jakby ten przykład który podałem działał tak: zaczynam coś wpisywać do inputa, i wtedy widget się przenosi?
Żeby karetka wpisywania zachowała swoje miejsce, żeby nie musieć tego przenosić ręcznie?
Muszę sprawdzić w tym swoim przykładzie, czy jak używam
element.append, to mi stan zaznaczeniaelement.appendteż nie do końca zachowuje ciągłość.Focus z input-a znika - to da się łatwo naprawić.
Ale nie znika pozycja kursora w inpucie - to na plus.
Za to np. Ctrl+z działa tylko do miejsca przejścia - czyli jak zacznę pisać, to po pierwszej literze widget się przenosi(takie działanie ustawiłem), a potem Ctrl+z nie kasuje tej pierwszej wpisanej litery. Cofania działa tylko do miejsca, w
Ja to testuję na Vanilia JS i w nim to działa w ten sposób.
z vdom to na pewno by znikała, bez wątpienia - dlatego zastanawiam się nad rozwiązaniem, zachowującym ciągłość.
U mnie element ma być w dwóch miejscach - raz w jednym, raz w drugim.
Portals sprawia, że mimo że jest w jednym, to jest traktowany jakby był zagnieżdżony w innym.
Po prostu rozwiązuje to inny problem.
próbuję teraz z event-em
beforeinput.Oczywiście replaceWith tego nie rozwiązuje, zdążyłem się zorientować.
Ja o tym wyżej już pisałem. :|