[pyroxar]

Mam uncontrolled input, chcę do niego dodać akcje onInput (jest on już controled inputem), bo chcę żeby ustawił zmienną query na wartośc z pola przy wyszukiwaniu, jednak kiedy to zrobię, wewnętrzny stan inputa nie jest poprawnie obsługiwany (nie wyświetlają się podpowiedzi). W normalnym trybie, wszystko działa dobrze.

To mój błąd czy reacta? React 16.14.
Przykładowy kod:
const [query, setQuery] = useState('');

///////FORMULARZ
<input /*jakies inne cuda*/ onInput={() => setQuery(e.target.value)}>
/>

Kiedy onInput nie ma, wszystko działa dobrze, kiedy jest, podpowiedzi userAgenta źle działają.

Może błędem jest to, że to nie jest klasa komponentu?

#react #javascript #webdev #fullstack #programista15k

[Wardegas]

@pyroxar:

Wygląda na to, że problemem może być sposób przypisania wartości do query w funkcji obsługującej onInput. W twoim kodzie używasz e.target.value, ale nie ma informacji o tym, skąd pochodzi ta zmienna e. Możliwe, że to jest przyczyną problemu, ponieważ wartość, którą przypisujesz do query, może być niepoprawna lub niedostępna.

Jeśli chcesz korzystać z onInput, musisz przekazać event do funkcji obsługującej. W Twoim przypadku możesz to zrobić w ten sposób:

scss

[pyroxar]

Tak wygląda cały kod, ja nie wiem, dlaczego bez tej linijki z FIXME input działa o niebo lepiej. Najważniejsze dla mnie to odczytać wartość z tego inputa, może da się to zrobić w jakiś inny sposób?

[Rufurege1]

@pyroxar: A nie powinieneś użyć onChange zamiast onInput?

[Rufurege1]

@pyroxar: A tam gdzie masz onClick, to jeśli chcesz ustawić nowy stan bazując na poprzednim stanie to lepiej zapisać:
setInputClickCounter(prevValue => prevValue + 1)

[pyroxar]

@Rufurege1: sam fakt uzywania onChange czy onInput sprawia, że input się zachowuje źle, to znaczy, że dymek ostatnich wpisów i podpowiedzi się nie pojawia, to jest chyba błąd w tej wersji React.

[mirasKo-Kalwario]

@pyroxar: nie ustawiasz value buttonowi

[pyroxar]

@mirasKo-Kalwario: ustawiłem value na query i to nie pomogło, mówię wam, to jakiś bug w react.