React js - Obsługa dziedziczonych komponentów

Question

Witam.

Mam 3 komponenty:

Formularz

 -- Pole input

 -- Przycisk submit

Te dwa ostatnie są "dziećmi" komponentu formularz.

Komponent input validuje pod względem emaila i adresem IP, jeżeli nie są poprawne przestawiam state : error na true

I tu pytanie : Jak zobaczyć w komponencie Formularz, że w jednym z komponentów pola input jest state error:true, i jeżeli jest zmień komponent Przycisk submit

Comments

To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component.

Tutorial: Intro to React - Lifting State Up

 

Answer 1

Niech te komponenty przyjmują przekazują do parenta informację o swoim stanie - w ten sposób w parencie możesz nasłuchiwać na zmiany tych "dzieci" i odpowiednio modyfikować sobie jego state, na podstawie którego robisz np. jakąś całościową walidację.

Szczerze to nie zapinałbym tutaj reduxa, redux moim zdaniem powinien trzymać raczej dane ostateczne, czyli np. info o ogólnej walidacji forma ale i to generalnie często nie jest potrzebne w global store. Jeśli masz jeden lub dwa poziomy w komunikacji parent-child to zostałbym przy propsach. Jeśli tych poziomów byłoby więcej to wg mnie doskonale sprawdzi się tutaj context api, sam korzystam z tego w różnych przypadkach. Warto zawsze szukać rozwiązań do konkretnego problemu, są sytuacje, gdzie lepsze będą propsy, gdzie indziej redux global store a gdzie indziej context.

Comments

Można by jeszcze skorzystać z React.createRef(). W ten sposób rodzic może podejrzeć state dziecka

---

można, ale ja nie lubię takiej komunikacji. Wolę, jak każda strona "świadomie" informuje o swoich zmianach, latwiej wg mnie się analizuje taki kod i nim zarządza oraz dobrze widać taką komunikację w testach.

Answer 2

może redux?

Comments

No może to raczej troche przesada żeby do czegoś takiego wykorzystać redux. Ale może przechowuj state: error w komponencie formularz i przesyłaj go do submita.