You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Reactissa voit lisätä *tapahtumakäsittelijöitä* JSX koodiin. Tapahtumakäsittelijät ovat funktioitasi, joita kutsutaan vastauksena käyttäjän toimintoihin kuten klikkaukseen, hoverointiin, focusointiin ja niin edelleen.
25
+
Reactissa voit lisätä *Tapahtumankäsittelijöitä* JSX koodiin. Tapahtumankäsittelijät ovat funktioitasi, joita kutsutaan vastauksena käyttäjän toimintoihin kuten klikkaukseen, hoverointiin, focusointiin ja niin edelleen.
26
26
27
-
Sisäänrakennetut komponentit kuten `<button>` tukevat ainoastaan selaimen sisäänrakennettuja tapahtumia kuten `onClick`. Voit kuitenkin luoda omia komponentteja ja niiden tapahtumakäsittelijöiden nimet voivat olla niin sovelluskohtaisia kuin haluat.
27
+
Sisäänrakennetut komponentit kuten `<button>` tukevat ainoastaan selaimen sisäänrakennettuja tapahtumia kuten `onClick`. Voit kuitenkin luoda omia komponentteja ja niiden Tapahtumankäsittelijöiden nimet voivat olla niin sovelluskohtaisia kuin haluat.
28
28
29
29
<Sandpack>
30
30
@@ -62,7 +62,7 @@ button {
62
62
63
63
<LearnMorepath="/learn/responding-to-events">
64
64
65
-
Lue **[Responding to Events](/learn/responding-to-events)** oppiaksesi miten lisätä tapahtumakäsittelijöitä.
65
+
Lue **[Responding to Events](/learn/responding-to-events)** oppiaksesi miten lisätä Tapahtumankäsittelijöitä.
66
66
67
67
</LearnMore>
68
68
@@ -347,7 +347,7 @@ textarea {
347
347
348
348
<LearnMorepath="/learn/state-as-a-snapshot">
349
349
350
-
Lue **[Tila tilannekuvana](/learn/state-as-a-snapshot)** oppiaksesi miksi tila vaikuttaa "vakiolta" ja muuttumattomalta tapahtumakäsittelijöissä.
350
+
Lue **[Tila tilannekuvana](/learn/state-as-a-snapshot)** oppiaksesi miksi tila vaikuttaa "vakiolta" ja muuttumattomalta Tapahtumankäsittelijöissä.
Copy file name to clipboardExpand all lines: src/content/learn/choosing-the-state-structure.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -340,7 +340,7 @@ Tässä, `fullName` *ei* ole tilamuuttuja. Sen sijaan se lasketaan renderöinnin
340
340
constfullName= firstName +''+ lastName;
341
341
```
342
342
343
-
Näin ollen tapahtumakäsittelijöiden ei tarvitse tehdä mitään erityistä sen päivittämiseksi. Kun kutsut `setFirstnName` tai `setLastName` funktioita, kutsut uudelleenrenderöinnin, ja seuraavan kerran `fullName` tullaan laskemaan uusiksi uuden datan pohjalta.
343
+
Näin ollen Tapahtumankäsittelijöiden ei tarvitse tehdä mitään erityistä sen päivittämiseksi. Kun kutsut `setFirstnName` tai `setLastName` funktioita, kutsut uudelleenrenderöinnin, ja seuraavan kerran `fullName` tullaan laskemaan uusiksi uuden datan pohjalta.
Vaikka voisit huolellisesti muuttaa jokaista tapahtumakäsittelijää päivittämään `update` ja `packed` laskurit oikein, juuriongelma on, että nämä tilamuuttujat ovat olemassa ylipäätään. Ne ovat tarpeettomia, koska voit aina laskea kohteiden määrät (pakatun tai ylipäätään) suoraan `items`-tilamuuttujasta. Poista tarpeeton tila korjataksesi bugi:
2148
+
Vaikka voisit huolellisesti muuttaa jokaista Tapahtumankäsittelijää päivittämään `update` ja `packed` laskurit oikein, juuriongelma on, että nämä tilamuuttujat ovat olemassa ylipäätään. Ne ovat tarpeettomia, koska voit aina laskea kohteiden määrät (pakatun tai ylipäätään) suoraan `items`-tilamuuttujasta. Poista tarpeeton tila korjataksesi bugi:
Huomaa miten tapahtumakäsittelijät kutsuvat vain `setItems` funktiota tämän muutoksen jälkeen. Kohteiden laskut lasketaan renderöinnin aikana `items` taulukosta, joten ne ovat aina ajan tasalla.
2281
+
Huomaa miten Tapahtumankäsittelijät kutsuvat vain `setItems` funktiota tämän muutoksen jälkeen. Kohteiden laskut lasketaan renderöinnin aikana `items` taulukosta, joten ne ovat aina ajan tasalla.
Copy file name to clipboardExpand all lines: src/content/learn/escape-hatches.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -318,7 +318,7 @@ Tämä osio kuvailee **kokeellista API:a, joka ei ole vielä julkaistu** Reactin
318
318
319
319
</Wip>
320
320
321
-
Tapahtumakäsittelijät suoritetaan uudelleen ainoastaan kun suoritat saman vuorovaikutuksen uudelleen. Toisin kuin tapahtumakäsittelijät, Efektit synkronoituvat jos jokin arvo jota ne luki, kuten propsi tai tilamuuttuja, on muuttunut viimeisestä renderöinnistä. Joskus haluat myös sekoituksen molemmista käyttäytymisistä: Efekti joka suoritetaan uudelleen vastauksena joihinkin arvoihin mutta ei toisiin.
321
+
Tapahtumankäsittelijät suoritetaan uudelleen ainoastaan kun suoritat saman vuorovaikutuksen uudelleen. Toisin kuin Tapahtumankäsittelijät, Efektit synkronoituvat jos jokin arvo jota ne luki, kuten propsi tai tilamuuttuja, on muuttunut viimeisestä renderöinnistä. Joskus haluat myös sekoituksen molemmista käyttäytymisistä: Efekti joka suoritetaan uudelleen vastauksena joihinkin arvoihin mutta ei toisiin.
322
322
323
323
Kaikki koodi Efektin sisällä on *reaktiivista.* Se suoritetaan uudelleen mikäli jokin reaktiivinen arvo jota se lukee on muuttunut renderöinnin yhteydessä. Esimerkiksi, tämä Efekti yhdistää uudelleen chattiin jos joko `roomId` tai `theme` on muuttunut:
@@ -1087,7 +1087,7 @@ Reduktorien on oltava puhtaita, joten niiden ei tulisi mutatoida tilaa. Mutta Im
1087
1087
1088
1088
<Recap>
1089
1089
1090
-
-`useState`sta `useReduceriin` muuttaminen:
1090
+
-`useState`sta `useReducer`iin muuttaminen:
1091
1091
1. Lähetä toimintoja tapahtumankäsittelijöistä.
1092
1092
2. Kirjoita reduktorifunktio, joka palauttaa seuraavan tilan annetulle tilalle ja toiminnolle.
1093
1093
3. Korvaa `useState``useReducer`:lla.
@@ -1857,7 +1857,7 @@ textarea {
1857
1857
1858
1858
Lopullinen tulos on sama. Pidä kuitenkin mielessä, että toiminto-tyyppien tulisi ideaalisti kuvata "mitä käyttäjä teki" toisin kuin "miten haluat tilan muuttuvan". Tämä tekee uusien ominaisuuksien lisäämisestä helpompaa myöhemmin.
1859
1859
1860
-
Molemmilla vaihtoehdoilla, on tärkeää, että **et* sijoita `alert` kutsua reduktorin sisään. Reduktorin tulisi olla puhdas funktio--sen tulisi laskea vain seuraava tila. Sen ei tulisi "tehdä" mitään, mukaanlukien näyttää käyttäjälle viestiä. Sen tulisi tapahtua tapahtumakäsittelijässä. (Helpottaaksesi tämän kaltaisten virheiden löytämistä, React kutsuu reduktoreitasi useita kertoja StrictModessa. Tämän takia jos laitat ilmoituksen reduktoriin, sitä kutsutaan kahdesti.)
1860
+
Molemmilla vaihtoehdoilla, on tärkeää, että **et* sijoita `alert` kutsua reduktorin sisään. Reduktorin tulisi olla puhdas funktio--sen tulisi laskea vain seuraava tila. Sen ei tulisi "tehdä" mitään, mukaanlukien näyttää käyttäjälle viestiä. Sen tulisi tapahtua Tapahtumankäsittelijässä. (Helpottaaksesi tämän kaltaisten virheiden löytämistä, React kutsuu reduktoreitasi useita kertoja StrictModessa. Tämän takia jos laitat ilmoituksen reduktoriin, sitä kutsutaan kahdesti.)
Huomaa miten `onClick={kunKlikataan}` ei sisällä sulkeita lopussa! Älä kutsu tapahtumakäsittelijää: sinun täytyy ainoastaan _välittää se_. React kutsuu tapahtumakäsittelijääsi kun käyttäjä napsauttaa painiketta.
274
+
Huomaa miten `onClick={kunKlikataan}` ei sisällä sulkeita lopussa! Älä kutsu Tapahtumankäsittelijää: sinun täytyy ainoastaan _välittää se_. React kutsuu Tapahtumankäsittelijääsi kun käyttäjä napsauttaa painiketta.
275
275
276
276
## Ruudun päivittäminen {/*updating-the-screen*/}
277
277
@@ -427,7 +427,7 @@ function MyButton() {
427
427
428
428
```
429
429
430
-
Sitten _anna tila alaspäin_ `MyApp` komponentissa kuhunkin `MyButton` komponenttiin yhdessä klikkauksen tapahtumakäsittelijän kanssa. Voit antaa tietoa `MyButton` komponenttiin käyttäen JSX aaltosulkeita, aivan kuten aiemmin teit sisäänrakennettujen `<img>` tagien kanssa:
430
+
Sitten _anna tila alaspäin_ `MyApp` komponentissa kuhunkin `MyButton` komponenttiin yhdessä klikkauksen Tapahtumankäsittelijän kanssa. Voit antaa tietoa `MyButton` komponenttiin käyttäen JSX aaltosulkeita, aivan kuten aiemmin teit sisäänrakennettujen `<img>` tagien kanssa:
431
431
432
432
```js {11-12}
433
433
exportdefaultfunctionMyApp() {
@@ -447,7 +447,7 @@ export default function MyApp() {
447
447
}
448
448
```
449
449
450
-
Tietoa, jota annat alaspäin näin kutsutaan _propseiksi_ (engl. props). Nyt `MyApp` komponentti sisältää `count` tilan, `handleClick`tapahtumakäsittelijän, sekä _antaa molemmat näistä propseina_ kullekin painikkeelle.
450
+
Tietoa, jota annat alaspäin näin kutsutaan _propseiksi_ (engl. props). Nyt `MyApp` komponentti sisältää `count` tilan, `handleClick`Tapahtumankäsittelijän, sekä _antaa molemmat näistä propseina_ kullekin painikkeelle.
451
451
452
452
Lopuksi, mutta `MyButton` _lukemaan_ propsit, jotka annoit sille sen pääkomponentista:
453
453
@@ -461,7 +461,7 @@ function MyButton({count, onClick}) {
461
461
}
462
462
```
463
463
464
-
Kun klikkaat painiketta, `onClick`tapahtumakäsittelijää kutsutaan. Jokaisen painikkeen `onClick` propsi on asetettu `handleClick` funktioon `MyApp` komponentissa, joten koodi sen sisällä suoritetaan. Se koodi kutsuu `setCount(count +1)`, nostaen `count` tilamuuttujaa. Uusi `count` tila välitetään propsina kullekin painikkeelle jolloin ne kaikki näyttävät samaa uutta arvoa. Tätä kutsutaan "tilan nostamiseksi ylös". Siirtämällä tilaa ylös jaamme sitä komponenttien välillä.
464
+
Kun klikkaat painiketta, `onClick`Tapahtumankäsittelijää kutsutaan. Jokaisen painikkeen `onClick` propsi on asetettu `handleClick` funktioon `MyApp` komponentissa, joten koodi sen sisällä suoritetaan. Se koodi kutsuu `setCount(count +1)`, nostaen `count` tilamuuttujaa. Uusi `count` tila välitetään propsina kullekin painikkeelle jolloin ne kaikki näyttävät samaa uutta arvoa. Tätä kutsutaan "tilan nostamiseksi ylös". Siirtämällä tilaa ylös jaamme sitä komponenttien välillä.
Copy file name to clipboardExpand all lines: src/content/learn/keeping-components-pure.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -193,9 +193,9 @@ Kuitenkin se on sallittua, koska olet luonut ne *saman renderöinnin aikana* `Te
193
193
194
194
Vaikka funktionaalinen ohjelmointi nojaa pitkälti puhtauteen, jossain vaiheessa, jossain, _jonkin_ on muututtava. Tämähän on koodauksen koko pointti! Nämä muutokset—ruudunpäivitykset, animaation aloitukset, datan muuttaminen—ovat **sivuvaikutuksia**. Ne ovat asioita, jotka tapahtuvat _"siinä sivussa,"_ ei kesken renderöinnin.
195
195
196
-
Reactissa, **sivuvaikutukset useimmiten kuuluvat [tapahtumakäsittelijöiden](/learn/responding-to-events) sisään.**Tapahtumakäsittelijät ovat funktioita, joita React suorittaa kun teet jotain toimintoja—esimerkiksi painat nappia. Vaikka tapahtumakäsittelijät on määritelty komponentin *sisällä*, niitä ei suoriteta renderöinnin *aikana*! **Joten tapahtumakäsittelijöiden ei tarvitse olla puhtaita.**
196
+
Reactissa, **sivuvaikutukset useimmiten kuuluvat [Tapahtumankäsittelijöiden](/learn/responding-to-events) sisään.**Tapahtumankäsittelijät ovat funktioita, joita React suorittaa kun teet jotain toimintoja—esimerkiksi painat nappia. Vaikka Tapahtumankäsittelijät on määritelty komponentin *sisällä*, niitä ei suoriteta renderöinnin *aikana*! **Joten Tapahtumankäsittelijöiden ei tarvitse olla puhtaita.**
197
197
198
-
Jos olet olet käyttänyt kaikki vaihtoehdot, etkä löydä oikeaa tapahtumakäsittelijää sivuvaikutuksellesi, voit silti kiinnittää sen palautettuun JSX:ään käyttäen [`useEffect`](/reference/react/useEffect) kutsua komponentissasi. Tämä kertoo Reactille, että kutsuu sitä myöhemmin renderöinnin jälkeen, jolloin sivuvaikutukset ovat sallittuja. **Huomaa, että tämän tavan pitäisi olla sinun viimeinen keino.**
198
+
Jos olet olet käyttänyt kaikki vaihtoehdot, etkä löydä oikeaa Tapahtumankäsittelijää sivuvaikutuksellesi, voit silti kiinnittää sen palautettuun JSX:ään käyttäen [`useEffect`](/reference/react/useEffect) kutsua komponentissasi. Tämä kertoo Reactille, että kutsuu sitä myöhemmin renderöinnin jälkeen, jolloin sivuvaikutukset ovat sallittuja. **Huomaa, että tämän tavan pitäisi olla sinun viimeinen keino.**
199
199
200
200
Kun mahdollista, kokeile muotoilla logiikkasi vain renderöinnillä. Yllätyt miten pitkälle sillä pääsee!
201
201
@@ -220,7 +220,7 @@ Jokainen uusi Reactin ominaisuus joita rakennamme hyödyntää puhtautta. Tiedon
220
220
***Samat sisääntulot, sama ulostulo.** Annettaen sama syöte, komponentin tulisi aina palauttaa sama JSX.
221
221
* Renderöinti voi tapahtua koska vain, joten komponenttien ei tulisi riippua toistensa renderöintijärjestyksestä.
222
222
* Sinun ei pitäisi muuttaa lähtötietoja, joita komponenttisi käyttää renderöintiin. Tämä sisältää propsit, tilan sekä kontekstin. Ruudun päivittämiseksi ["aseta" tila](/learn/state-a-components-memory) olemassaolevien olioiden muuttamisen sijaan.
223
-
* Pyri ilmaisemaan komponenttisi logiikka JSX:ssä jota palautat. Kun täytyy "muuttaa asioita", useimmiten teet sen tapahtumakäsittelijässä. Viimeisenä keinona voit käyttää `useEffect`:ia.
223
+
* Pyri ilmaisemaan komponenttisi logiikka JSX:ssä jota palautat. Kun täytyy "muuttaa asioita", useimmiten teet sen Tapahtumankäsittelijässä. Viimeisenä keinona voit käyttää `useEffect`:ia.
224
224
* Puhtaiden funktioiden kirjoittaminen vaatii hieman harjoittelua, mutta se avaa Reactin paradigman voiman.
0 commit comments