[aptitude]

Jak zrobić w React, że po wciśnięciu klawisza Escape zostanie zmieniona wartość w state "confirm" na "true", a ponowne wciśnięcie Escape uruchomi skrypt secPress()?

const [confirm, setConfirm] = useState(false);

 const _confirm = () => {
 if (confirm) {
 secPress();
 } else {
 setConfirm(true);
 }
 console.log(confirm); // <-- zwraca zawsze false
 };

 useKeypress("Escape", () => {
 _confirm();
 console.log("test"); // <-- zwraca "test"
 });

Źródło useKeypress Hook na Gist

#programowanie #javascript #react

[Edhendil]

@aptitude: tak naprawde wszystko w kodzie jest ok tylko tyle ze setState działa lekko inaczej niż sobie wyobrażasz.
Gdy wykonuje sie setConfirm(true) to zmienna confirm nie uzyska natychmiast nowej wartości, a dopiero wtedy gdy ponownie zostanie odpalony hook useState (tylko tam w Twoim kodzie jest bezposrednie przypisanie do zmiennej confirm i to jest poprawne podejscie). A z kolei hook zostanie odpalony dopiero w kolejnej rundzie rerenderowania komponentu.
Zrob sobie console.log(confirm)

[aptitude]

@Edhendil: Rozumiem, to jak rozwiązać mój problem?

[lobo]

@aptitude: np. tak https://codesandbox.io/s/musing-poincare-x9e75?file=/src/App.js

na przyszłość dawaj kod na sandbox

[aptitude]

@lobo: Możesz podesłać na pastebina? Bo nie załaduje mi się codesandbox teraz..

[lobo]

@aptitude: https://pastebin.com/TqFLWfSF

[aptitude]

@lobo: Hmm, a jak uruchomić secPress() po drugim wciśnięciu Escape?

[lobo]

@aptitude: https://pastebin.com/CnKP9SLL

[aptitude]

@lobo: Właśnie tak zrobiłem i uruchamia się secPress() po pierwszym wciśnięciu Escape.

[lobo]

@aptitude: no ja widzę na sandbox, że odpala się za drugim razem dopiero (co 2 raz)

[aptitude]

@lobo: Przepraszam, mój błąd. Nie uruchamia się wcale secPress().

[aptitude]

@lobo: W konsoli wyswietla tylko cały czas false.

[lobo]

@aptitude: Możesz sobie na sandbox odpalić działa tak jak chcesz :)

[lobo]

@aptitude:

[lobo]

@aptitude: no i możesz to zrobić jeszcze inaczej możesz sobie dodać

useEffect(() => {
if (confirm) {
secPress();
}
}, [confirm])

[aptitude]

@lobo: a sprawdź czy działa Ci mój komponent: https://pastebin.com/Mm9Lx71d

[aptitude]

useEffect(() => {

if (confirm) {

secPress();

}

}, [confirm])

@lobo: tez po pierwszym wciśnięciu mi uruchamia secPress()

[lobo]

@aptitude: Twój komponent mi wyświetla asd po pierwszym kliknięciu esc i po drugim odpala dodatkowo secPress czyli zakładam, że działa dobrze

[lobo]

@aptitude: no i po 2 sec jak się nacisnęło jeden raz esc to zmienia na false

[aptitude]

@lobo: tak powinno być, tylko u mnie po pierwszym wciśnięciu esc uruchamia już secPress().
Hmm, ale jak u ciebie działa to zobaczę co jest nie tak u mnie, dzięki za pomoc

[zackson]

po wciśnięciu klawisza Escape

@aptitude:w hooku masz keyup więc będziesz miał po puszczeniu klawisza a nie po wciśnięciu, a Twoja funkcja nazywa się useKeypress
https://react-pwyv2l.stackblitz.io - zoba konsole czy o to chodzi