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
Copy file name to clipboardExpand all lines: src/content/learn/responding-to-events.md
+8-7Lines changed: 8 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -109,7 +109,7 @@ Gdy piszesz kod w jednej linii, ta sama pułapka czeka na ciebie w innej formie:
109
109
Przekazywanie kodu w lini, tak jak w poniższym przykładzie, nie uruchomi się na kliknięcie - wywoła się za każdym razem, gdy komponent się wyrenderuje:
110
110
111
111
```jsx
112
-
// Ten alert wyskoczy gdy komponent się generuje, a nie gdy został naciśnięty!
112
+
// Ten alert wyskoczy, gdy komponent się renderuje, a nie gdy został naciśnięty!
113
113
<button onClick={alert('Nacisnąłeś mnie!')}>
114
114
```
115
115
@@ -119,20 +119,21 @@ Jeśli chcesz stworzyć własną procedurę obsługi zdarzeń w linii, otocz ją
119
119
<button onClick={() =>alert('Nacisnąłeś mnie!')}>
120
120
```
121
121
122
-
Zamiast wywoływać kod wewnątrz z każdym renderowaniem, stworzy to funkcję do wywołania później.
122
+
Zamiast wywoływać kod wewnątrz przy każdym renderowaniu, stworzy to funkcję do wywołania później.
123
123
124
124
W obu przypadkach to co chcesz przekazać, jest funkcją:
125
125
126
-
*`<button onClick={handleClick}>`prezkazuje funkcję `handleClick`.
127
-
*`<button onClick={() => alert('...')}>`prezkazuje funkcję `() => alert('...')`.
126
+
*`<button onClick={handleClick}>`przekazuje funkcję `handleClick`.
127
+
*`<button onClick={() => alert('...')}>`przekazuje funkcję `() => alert('...')`.
128
128
129
-
[Więcej o funkcjach strzałkowych.](https://javascript.info/arrow-functions-basics)
129
+
[Przeczytaj więcej o funkcjach strzałkowych.](https://javascript.info/arrow-functions-basics)
130
130
131
131
</Pitfall>
132
132
133
133
### Odczytywanie właściwości w procedurach obsługi zdarzeń {/*reading-props-in-event-handlers*/}
134
134
135
135
Ponieważ procedury są deklarowane wewnątrz komponentu, mają dostęp do jego właściwości. Oto przycisk, który po kliknięciu pokaże alert z właściwością `message`:
136
+
136
137
<Sandpack>
137
138
138
139
```js
@@ -151,7 +152,7 @@ export default function Toolbar() {
151
152
Odtwórz film
152
153
</AlertButton>
153
154
<AlertButton message="Dodawanie!">
154
-
Dodaj film
155
+
Dodaj obraz
155
156
</AlertButton>
156
157
</div>
157
158
);
@@ -168,7 +169,7 @@ To pozwala tym dwóm przyciskom pokazywać różne wiadomości. Spróbuj je zmie
168
169
169
170
### Przekazywanie procedur obsługi zdarzeń jako właściwości {/*passing-event-handlers-as-props*/}
170
171
171
-
Często będziesz chciał, aby komponent-rodzic zdefiniował dziecku procedurę obsługi zdarzeń. Przyjrzyj się przyciskom: w zależności od tego, gdzie użyjesz komponentu `Button`, możesz chcieć wykonać inną funkcję - być może jeden odtwarza film, a drugi wrzuca obrazek?
172
+
Często będziesz chcieć, aby komponent-rodzic zdefiniował dziecku procedurę obsługi zdarzeń. Przyjrzyj się przyciskom: w zależności od tego, gdzie użyjesz komponentu `Button`, możesz chcieć wykonać inną funkcję - być może jeden odtwarza film, a drugi dodaje obrazek?
172
173
173
174
Aby to zrobić, przekaż właściwość, którą komponent otrzymał od rodzica, jako procedura obsługi w taki sposób:
0 commit comments