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?
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
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?
@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)
@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.
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
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
źródło: Zrzut ekranu z 2023-04-11 11-02-43
PobierzsetInputClickCounter(prevValue => prevValue + 1)