Czym są refs w React?
Refs w React służą do bezpośredniego odwoływania się do elementów DOM lub instancji komponentów. Używa się ich wtedy, gdy trzeba np. odczytać wartość pola formularza, ustawić fokus albo obsłużyć element bez standardowego przepływu danych przez state i props.
Tworzenie refa
W komponencie klasowym ref można utworzyć za pomocą:
nazwa1 = React.createRef();
Następnie przypisuje się go do elementu JSX przez atrybut ref:
<input ref={this.nazwa1} />
Od tej chwili element input jest dostępny przez:
this.nazwa1.current
A jego wartość można odczytać tak:
this.nazwa1.current.value
Ważne w zadaniach egzaminacyjnych
Jeżeli w kodzie występuje:
nazwa1 = React.createRef();
<input ref={this.nazwa1} />
to w metodzie należy odwołać się do nazwy refa, czyli:
this.nazwa1.current.value
Nie wybiera się tutaj name, id, class ani for, tylko nazwę zmiennej przechowującej referencję.