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
@@ -116,8 +115,8 @@ Mielőtt a weboldalt végstádiumba publikálod, tartsd szem előtt, hogy a nem
116
115
Ha már csökkented az alkalmazásod scriptjeinek a méretét, **az oldalad készen áll a végstádiumra**, amennyiben a publikált HTML oldalad a `production.min.js` végződésű React verziót tölti be:
Ha nincs kódcsökkentő lépésed a scriptekhez, [itt egy módja, hogyan tudod ezt beállítani](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
@@ -185,7 +184,7 @@ Gratulálunk! Ezzel **beállítottad a JSX publikálásra kész** használatát
185
184
Készíts egy `src` nevű mappát és futtasd az alábbi parancsot a terminálodban:
A fenti verziók csak a fejlesztésre értendőek, és nem megfelelőek éles környezetben való használathoz. A React kicsinyített és optimalizált változatai a következő helyen érhetőek el:
>Ez az oldal csak a React 16 és korábbi veziókra, valamint React Native-re vonatkozik.
10
+
>
11
+
>A React 17 a weben **nem használ** esemény pooling-ot.
12
+
>
13
+
>Erről a React 17 változásról [többet itt olvashatsz](/blog/2020/08/10/react-v17-rc.html#no-event-pooling).
14
+
15
+
A [`SyntheticEvent`](/docs/events.html) objektumok egy közös készletben vannak. Ez azt jelenti, hogy a `SyntheticEvent` objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után. Ez például nem fog működni:
16
+
17
+
```javascript
18
+
functionhandleChange(e) {
19
+
// Ez nem fog műküdni, mert az esemény objektumok újra fel lesznek használva.
20
+
setTimeout(() => {
21
+
console.log(e.target.value); // Túl késő!
22
+
}, 100);
23
+
}
24
+
```
25
+
26
+
Ha szeretnél egy esemény tulajdonságaihoz azután hozzáférni hogy az eseménykezelő lefutott, meg kell hogy hívd az `e.persist()` metódust:
27
+
28
+
```javascript
29
+
functionhandleChange(e) {
30
+
// Megakadályozza a Reactet a tulajdonságok visszaállításában:
Copy file name to clipboardExpand all lines: content/docs/reference-events.md
+85-29Lines changed: 85 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,36 +34,11 @@ string type
34
34
35
35
> Megjegyzés:
36
36
>
37
-
> A v0.14-től kezdve `false` érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az `e.stopPropagation()`-t, vagy az `e.preventDefault`-ot, attól függően melyik a helyes a te esetedben.
38
-
39
-
### Események összegyűjtése {#event-pooling}
40
-
41
-
A `SyntheticEvent` egy közös készletben van. Ez azt jelenti, hogy a `SyntheticEvent` objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után.
42
-
Ez a teljesítmény növelése érdekében történik.
43
-
Így az eseményhez nem férhetsz aszinkron módon.
44
-
45
-
```javascript
46
-
functiononClick(event) {
47
-
console.log(event); // => kinullázott objektum.
48
-
console.log(event.type); // => "click"
49
-
consteventType=event.type; // => "click"
50
-
51
-
setTimeout(function() {
52
-
console.log(event.type); // => null
53
-
console.log(eventType); // => "click"
54
-
}, 0);
55
-
56
-
// Nem fog működni. A this.state.clickEvent csak null értékeket fog tartalmazni.
57
-
this.setState({clickEvent:event});
58
-
59
-
// Az esemény értékeket még így is ki tudod exportálni.
60
-
this.setState({eventType:event.type});
61
-
}
62
-
```
37
+
> A React 17-től kezdve az `e.persist()` nem csinál semmit, mivel a `SyntheticEvent` többé nincs ["összegyűtjve"](/docs/legacy-event-pooling.html).
63
38
64
39
> Megjegyzés:
65
40
>
66
-
> Ha szeretnél az események tulajdonságaihoz aszinkron módon hozzáférni, meg kell hogy hívd az `event.persist()` metódust az eseményen, ami eltávolítja a szintetikus eseményt a medencéből és lehetővé teszi az eseményre mutató hivatkozások megtartását felhasználói kóddal.
41
+
> A v0.14-től kezdve `false` érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az `e.stopPropagation()`-t, vagy az `e.preventDefault`-ot, attól függően melyik a helyes a te esetedben.
67
42
68
43
## Támogatott események {#supported-events}
69
44
@@ -72,13 +47,15 @@ A React normalizálja az eseményeket annak érdekében, hogy a tulajdonságaik
72
47
Az alábbi eseménykezelők egy esemény által lettek elindítva a "bubbling" fázisban. Egy eseménykezelő regisztrálásához a "capture" fázisban add hozzá a `Capture` szót az esemény nevéhez; például az `onClick` helyett használd az `onClickCapture`-t kattintási események kezeléséhez a capture fázisban.
@@ -171,10 +148,85 @@ Ezek a fókuszálás-események minden elemen működnek a React DOM-ban, nem cs
171
148
172
149
Tulajdonságok:
173
150
174
-
```javascript
151
+
```js
175
152
DOMEventTarget relatedTarget
176
153
```
177
154
155
+
#### onFocus
156
+
157
+
Az `onFocus` esemény akkor van meghívva, amikor az elem (vagy valamelyik elem azon belül) fókuszálva van. Például amikor a felhasználó egy szöveg beivteli mezőre kattint.
158
+
159
+
```javascript
160
+
functionExample() {
161
+
return (
162
+
<input
163
+
onFocus={(e) => {
164
+
console.log('Fókuszálva a beviteli mezőre');
165
+
}}
166
+
placeholder="Az onFocus meg lesz hívva, ha erre a beviteli mezőre kattintasz."
167
+
/>
168
+
)
169
+
}
170
+
```
171
+
172
+
#### onBlur
173
+
174
+
Az `onBlur` esemény akkor van meghívva, amikor a fókuszálás elhagyta az elemet (vagy valamelyik elemet azon belül). Például akkor, amikor a felhasználó egy fókuszált szöveg beviteli mezőn kívülre kattint.
175
+
176
+
```javascript
177
+
functionExample() {
178
+
return (
179
+
<input
180
+
onBlur={(e) => {
181
+
console.log('Meghívva, mivel a beviteli mező elvesztette a fókuszt');
182
+
}}
183
+
placeholder="Az onBlur meg lesz hívva, ha erre a beviteli mezőre kattintasz, majd utána ezen kívülre."
184
+
/>
185
+
)
186
+
}
187
+
```
188
+
189
+
#### Fókuszálás és fókuszálás elvesztésének detektálása
190
+
191
+
You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.
192
+
Használhatod a `currentTarget` és `releatedTarget`-et, hogy meg tudd különböztetni, hogy a fókuszálás vagy fókuszálás elvesztésének eseménye a szülő komponensen _kívülről_ jön-e. Itt egy demo amit kimásolhatsz és beilleszthetsz, ami megmutatja hogyan detektálj fókuszálást egy gyermek elemre, magára az elemre, és fókuszálást vagy fókuszálás elvesztést a teljes alfára.
193
+
194
+
```javascript
195
+
functionExample() {
196
+
return (
197
+
<div
198
+
tabIndex={1}
199
+
onFocus={(e) => {
200
+
if (e.currentTarget===e.target) {
201
+
console.log('saját magára fókuszált');
202
+
} else {
203
+
console.log('gyermekre fókuszált', e.target);
204
+
}
205
+
if (!e.currentTarget.contains(e.relatedTarget)) {
206
+
// Nincs meghívva gyermekek közti fókuszálás csere közt
207
+
console.log('fókusz belépés saját magára');
208
+
}
209
+
}}
210
+
onBlur={(e) => {
211
+
if (e.currentTarget===e.target) {
212
+
console.log('saját maga fókuszálásának elvesztése');
// Nincs meghívva gyermekek közti fókuszálás csere közt
218
+
console.log('fókuszálás elvesztése saját magáról');
219
+
}
220
+
}}
221
+
>
222
+
<input id="1"/>
223
+
<input id="2"/>
224
+
</div>
225
+
);
226
+
}
227
+
```
228
+
229
+
178
230
* * *
179
231
180
232
### Űrlapesemények {#form-events}
@@ -310,6 +362,10 @@ Eseménynevek:
310
362
onScroll
311
363
```
312
364
365
+
>Megjegyzés
366
+
>
367
+
>A React 17-től kezdve az `onScroll` esemény **nem használ "bubbling"-et**. Ez megegyezik a böngésző viselkedésével és meggátolja hogy egymásba ágyazott görgethető elemek eseményeket generáljanak egy távoli szülő elemen.
Copy file name to clipboardExpand all lines: content/docs/testing-recipes.md
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -377,7 +377,6 @@ let container = null;
377
377
beforeEach(() => {
378
378
// setup a DOM element as a render target
379
379
container = document.createElement("div");
380
-
// container *must* be attached to document so events work correctly.
381
380
document.body.appendChild(container);
382
381
});
383
382
@@ -416,7 +415,7 @@ it("changes value when clicked", () => {
416
415
});
417
416
```
418
417
419
-
Different DOM events and their properties are described in [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). Note that you need to pass `{ bubbles: true }` in each event you create for it to reach the React listener because React automatically delegates events to the document.
418
+
Different DOM events and their properties are described in [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). Note that you need to pass `{ bubbles: true }` in each event you create for it to reach the React listener because React automatically delegates events to the root.
0 commit comments