From 063abf369db02f71778af578d4e45636a43d2c64 Mon Sep 17 00:00:00 2001 From: ph1p Date: Thu, 14 Feb 2019 23:25:10 +0100 Subject: [PATCH 01/31] Start translation --- content/docs/handling-events.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index a8d3a1f51..9542c95d3 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -1,6 +1,6 @@ --- id: handling-events -title: Handling Events +title: Handhabung von Events permalink: docs/handling-events.html prev: state-and-lifecycle.html next: conditional-rendering.html @@ -8,12 +8,12 @@ redirect_from: - "docs/events-ko-KR.html" --- -Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: +Die Handhabung von Events in React-Elementen ist ähnlich wie bei DOM-Elementen. Es gibt nur ein paar syntaktische Unterschiede: -* React events are named using camelCase, rather than lowercase. -* With JSX you pass a function as the event handler, rather than a string. +* Events in React werden nicht in Kleinbuchstaben, sondern in camelCase benannt. +* In JSX wird eine Funktion als Eventhandler übergeben und kein String. -For example, the HTML: +Zum Beispiel dieses HTML: ```html ``` -is slightly different in React: +ist in React ein wenig anders: ```js{1} ``` @@ -25,30 +25,30 @@ ist in React ein wenig anders: ```js{1} ``` -Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write: +Ein weiterer Unterschied ist, dass `false` nicht zurückgegeben werden kann um das Standardverhalten von React zu unterbinden. Es muss explizit `preventDefault` aufgerufen werden. Um beispielsweise das Aufrufen eines Links in schlichtem HTML zu verhindern, kannst du folgendes schreiben: ```html - - Click me + + Klicke mich ``` -In React, this could instead be: +In React könnte es stattdessen so aussehen: ```js{2-5,8} function ActionLink() { function handleClick(e) { e.preventDefault(); - console.log('The link was clicked.'); + console.log('Der Link wurde geklickt.'); } return ( - Click me + Klicke mich ); } @@ -79,7 +79,7 @@ class Toggle extends React.Component { render() { return ( ); } @@ -104,13 +104,13 @@ class LoggingButton extends React.Component { // This syntax ensures `this` is bound within handleClick. // Warning: this is *experimental* syntax. handleClick = () => { - console.log('this is:', this); + console.log('this ist:', this); } render() { return ( ); } @@ -124,14 +124,14 @@ If you aren't using class fields syntax, you can use an [arrow function](https:/ ```js{7-9} class LoggingButton extends React.Component { handleClick() { - console.log('this is:', this); + console.log('this ist:', this); } render() { // This syntax ensures `this` is bound within handleClick return ( ); } @@ -145,8 +145,8 @@ The problem with this syntax is that a different callback is created each time t Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work: ```js - - + + ``` The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively. From f8da85868e1786335ce5cc6fd82a9b8748a6b163 Mon Sep 17 00:00:00 2001 From: ph1p Date: Mon, 25 Feb 2019 10:37:35 +0100 Subject: [PATCH 03/31] Update texts --- content/docs/handling-events.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index e52030e90..159419960 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -54,9 +54,9 @@ function ActionLink() { } ``` -Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more. +Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events gemäß des [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), also brauchst du dir keine Sorgen über die browserübergreifende Kompatibilität machen. Mehr Informationen findest du im [`SyntheticEvent`](/docs/events.html) Referenz Handbuch. -When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered. +Bei der Benutzung von React, solltest du im Normalfall den Aufruf von `addEventListener` nicht benötigen um Events an Elemente im DOM zu binden nach dem sie erstellt worden. Stelle stattdessen einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states: From e7a9f88e2e26609bab4db72c6642962fc156968d Mon Sep 17 00:00:00 2001 From: ph1p Date: Mon, 25 Feb 2019 15:41:53 +0100 Subject: [PATCH 04/31] Update text --- content/docs/handling-events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 159419960..30e4e9846 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -58,7 +58,7 @@ Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events Bei der Benutzung von React, solltest du im Normalfall den Aufruf von `addEventListener` nicht benötigen um Events an Elemente im DOM zu binden nach dem sie erstellt worden. Stelle stattdessen einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. -When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states: +Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente eine Button, welcher zwischen den States "AN" und "AUS" wechselt: ```js{6,7,10-14,18} class Toggle extends React.Component { @@ -66,7 +66,7 @@ class Toggle extends React.Component { super(props); this.state = {isToggleOn: true}; - // This binding is necessary to make `this` work in the callback + // Diese Bindung ist nötig, damit `this` in der Callback-Methode funktioniert this.handleClick = this.handleClick.bind(this); } @@ -91,7 +91,7 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) +[**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called. From fdf5d799042c409c5556339458d18ec326827379 Mon Sep 17 00:00:00 2001 From: ph1p Date: Mon, 25 Feb 2019 17:35:07 +0100 Subject: [PATCH 05/31] Update texts --- content/docs/handling-events.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 30e4e9846..52f23da50 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -93,16 +93,16 @@ ReactDOM.render( [**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) -You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called. +Du musst Vorsichtig sein mit der Bedeutung von `this` in JSX Callbacks. In JavaScript sind Klassenmethoden nicht an diese standardmäßig [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` and die Klasse zu binden und an `onClick` übergibst, wird `this` `undefined` sein, wenn die Funktion tatsächlich aufgerufen wird. -This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method. +Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende, wie `onClick={this.handleClick}`, binden. -If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks: +Wenn es dich stört immer `bind` aufzurufen, gibt es zwei Möglichkeiten dies zu umgehen. Wenn du die experimentelle [public class fields sSyntax](https://babeljs.io/docs/plugins/transform-class-properties/) verwendest, kannst du Klassenfelder benutzen um Callbacks richtig zu binden: ```js{2-6} class LoggingButton extends React.Component { - // This syntax ensures `this` is bound within handleClick. - // Warning: this is *experimental* syntax. + // Diese Syntax stellt sicher, dass `this` innerhalb von handleClick gebunden ist. + // Warnung: Dies ist *experimentelle* Syntax. handleClick = () => { console.log('this ist:', this); } @@ -117,9 +117,9 @@ class LoggingButton extends React.Component { } ``` -This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app). +Diese Syntax is standardmäßig in [Create React App](https://github.com/facebookincubator/create-react-app) aktiviert. -If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback: +Wenn du die class field Syntax nicht verwendest, hast du die Möglichkeit im Callback eine [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) zu verwenden: ```js{7-9} class LoggingButton extends React.Component { @@ -128,7 +128,7 @@ class LoggingButton extends React.Component { } render() { - // This syntax ensures `this` is bound within handleClick + // Diese Syntax stellt sicher, dass `this` innerhalb von handleClick gebunden ist. return ( ); } From cc05e9aec8f5f9c40859177613938f7445b39ffc Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:41:05 +0100 Subject: [PATCH 07/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 692f8fe06..730c25812 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -110,7 +110,7 @@ class LoggingButton extends React.Component { render() { return ( ); } From b5254caccd787a5794420059db2ae2456b9d266e Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:41:17 +0100 Subject: [PATCH 08/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 730c25812..d7d6b83b1 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -97,7 +97,7 @@ Du musst Vorsichtig sein mit der Bedeutung von `this` in JSX Callbacks. In JavaS Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende, wie `onClick={this.handleClick}`, binden. -Wenn es dich stört immer `bind` aufzurufen, gibt es zwei Möglichkeiten dies zu umgehen. Wenn du die experimentelle [public class fields sSyntax](https://babeljs.io/docs/plugins/transform-class-properties/) verwendest, kannst du Klassenfelder benutzen um Callbacks richtig zu binden: +Wenn es dich stört immer `bind` aufzurufen, gibt es zwei Möglichkeiten dies zu umgehen. Wenn du die experimentelle [public class fields Syntax](https://babeljs.io/docs/plugins/transform-class-properties/) verwendest, kannst du Klassenfelder benutzen um Callbacks richtig zu binden: ```js{2-6} class LoggingButton extends React.Component { From 90bf9b6deece324c18f13ff0a01a2c6cc5bc704a Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:41:29 +0100 Subject: [PATCH 09/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index d7d6b83b1..b8cdb89f6 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -95,7 +95,7 @@ ReactDOM.render( Du musst Vorsichtig sein mit der Bedeutung von `this` in JSX Callbacks. In JavaScript sind Klassenmethoden nicht an diese standardmäßig [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` and die Klasse zu binden und an `onClick` übergibst, wird `this` `undefined` sein, wenn die Funktion tatsächlich aufgerufen wird. -Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende, wie `onClick={this.handleClick}`, binden. +Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende wie `onClick={this.handleClick}`, binden. Wenn es dich stört immer `bind` aufzurufen, gibt es zwei Möglichkeiten dies zu umgehen. Wenn du die experimentelle [public class fields Syntax](https://babeljs.io/docs/plugins/transform-class-properties/) verwendest, kannst du Klassenfelder benutzen um Callbacks richtig zu binden: From e626678a69b8ad1d1a53c02b8d9ec372389d13c5 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:41:46 +0100 Subject: [PATCH 10/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index b8cdb89f6..845a07fc4 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -58,7 +58,7 @@ Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events Bei der Benutzung von React, solltest du im Normalfall den Aufruf von `addEventListener` nicht benötigen um Events an Elemente im DOM zu binden nach dem sie erstellt worden. Stelle stattdessen einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. -Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente eine Button, welcher zwischen den States "AN" und "AUS" wechselt: +Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente einen Button, welcher zwischen den States "AN" und "AUS" wechselt: ```js{6,7,10-14,18} class Toggle extends React.Component { From e1759f5d7a823a2e4548346d86a4ac72230e45e7 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:42:38 +0100 Subject: [PATCH 11/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 845a07fc4..a37a081ea 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -48,7 +48,7 @@ function ActionLink() { return ( - Klicke mich + Klick mich ); } From e4c2189222c8e1af9c4127811a6796577c7e1550 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:42:48 +0100 Subject: [PATCH 12/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index a37a081ea..49031aca0 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -33,7 +33,7 @@ Ein weiterer Unterschied ist, dass `false` nicht zurückgegeben werden kann um d ```html - Klicke mich + Klick mich ``` From af38454c129876095321e220480bfdd0ebe305df Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:42:56 +0100 Subject: [PATCH 13/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 49031aca0..733b38690 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -56,7 +56,7 @@ function ActionLink() { Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events gemäß des [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), also brauchst du dir keine Sorgen über die browserübergreifende Kompatibilität machen. Mehr Informationen findest du im [`SyntheticEvent`](/docs/events.html) Referenz Handbuch. -Bei der Benutzung von React, solltest du im Normalfall den Aufruf von `addEventListener` nicht benötigen um Events an Elemente im DOM zu binden nach dem sie erstellt worden. Stelle stattdessen einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. +Mit React solltest du im Normalfall `addEventListener` nicht aufrufen müssen, um Events an DOM Elemente zu binden, nachdem sie erstellt worden. Stattdessen stellst du einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente einen Button, welcher zwischen den States "AN" und "AUS" wechselt: From 194005f5895976bf162eaf630f4466a0530f6b69 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:43:02 +0100 Subject: [PATCH 14/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 733b38690..344ba7ca1 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -54,7 +54,7 @@ function ActionLink() { } ``` -Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events gemäß des [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), also brauchst du dir keine Sorgen über die browserübergreifende Kompatibilität machen. Mehr Informationen findest du im [`SyntheticEvent`](/docs/events.html) Referenz Handbuch. +Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events gemäß der [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), also brauchst du dir keine Sorgen über browserübergreifende Kompatibilität machen. Mehr Informationen findest du im [`SyntheticEvent`](/docs/events.html) Referenz Handbuch. Mit React solltest du im Normalfall `addEventListener` nicht aufrufen müssen, um Events an DOM Elemente zu binden, nachdem sie erstellt worden. Stattdessen stellst du einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. From 04841ab3cceef6c20e689de872be6349aac18743 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Mon, 25 Feb 2019 18:45:39 +0100 Subject: [PATCH 15/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 344ba7ca1..fb9f42fe1 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -29,7 +29,7 @@ ist in React ein wenig anders: ``` -Ein weiterer Unterschied ist, dass `false` nicht zurückgegeben werden kann um das Standardverhalten von React zu unterbinden. Es muss explizit `preventDefault` aufgerufen werden. Um beispielsweise das Aufrufen eines Links in schlichtem HTML zu verhindern, kannst du folgendes schreiben: +Ein weiterer Unterschied ist, dass `false` nicht zurückgegeben werden kann, um das Standardverhalten von React zu unterbinden. Es muss explizit `preventDefault` aufgerufen werden. Um beispielsweise das Aufrufen eines Links in schlichtem HTML zu verhindern, kannst du folgendes schreiben: ```html From 8eabeae947f5b35435b717639dd62ea68cdab1d1 Mon Sep 17 00:00:00 2001 From: ph1p Date: Tue, 26 Feb 2019 09:53:18 +0100 Subject: [PATCH 16/31] Update text --- content/docs/handling-events.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index fb9f42fe1..47f8f0f0e 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -119,7 +119,7 @@ class LoggingButton extends React.Component { Diese Syntax is standardmäßig in [Create React App](https://github.com/facebookincubator/create-react-app) aktiviert. -Wenn du die class field Syntax nicht verwendest, hast du die Möglichkeit im Callback eine [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) zu verwenden: +Wenn du die class field Syntax nicht verwendest, hast du die Möglichkeit im Callback eine [Lambda-Funktion](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) zu verwenden: ```js{7-9} class LoggingButton extends React.Component { @@ -138,17 +138,17 @@ class LoggingButton extends React.Component { } ``` -The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem. +Das Problem mit dieser Syntax ist, dass jedes Rendern des `LoggingButton` einen anderen Callback erzeugt. In den meisten Fällen, ist das ok. Wenn jedoch dieser Callback an tiefer gelegene Komoponenten als Prop weitergegeben wird, könnten diese sich ein weiteres Mal neu rendern. Generell empfehlen wir, um diese Art von Performance Problemen zu vermeinden, die Events im Konstruktor zu binden oder die class field Syntax zu verwenden. -## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers} +## Argumente an Eventhandler geben {#passing-arguments-to-event-handlers} -Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work: +Innerhalb einer Schleife ist es üblich, einen zusätzlichen Parameter an den Eventhandler zu übergeben. Wenn beispielsweise `id` die Zeilen ID ist, würde folgendes funktionieren. ```js ``` -The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively. +Die beiden obigen Zeilen sind äquivalent und benutzen [Lambda-Funktionen](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) bzw. [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind). -In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded. +In beiden Fällen repräsentiert das `e` Argument das React Event und wird als zweites Argument nach der ID mitgeliefert. Bei einer Lambda-Funktion müssen wir es explizit übergeben, aber mit `bind` werden alle weiteren Argumente automatisch weitergeleitet. From 4d8f8efdd16d3165cf2baa3f4eaac2b9e299e2fd Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 09:59:15 +0100 Subject: [PATCH 17/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 47f8f0f0e..d8d36f632 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -93,7 +93,7 @@ ReactDOM.render( [**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) -Du musst Vorsichtig sein mit der Bedeutung von `this` in JSX Callbacks. In JavaScript sind Klassenmethoden nicht an diese standardmäßig [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` and die Klasse zu binden und an `onClick` übergibst, wird `this` `undefined` sein, wenn die Funktion tatsächlich aufgerufen wird. +Mit der Bedeutung von `this` musst du in JSX Callbacks vorsichtig sein. In JavaScript sind Klassenmethoden nicht standardmäßig daran [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` an die Klasse zu binden und an `onClick` übergibst, wird `this` beim Aufruf der Funktion `undefined` sein. Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende wie `onClick={this.handleClick}`, binden. From 5a56f3236e0b7de1d2395c4d3c836977f2c74236 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 26 Feb 2019 10:01:21 +0100 Subject: [PATCH 18/31] Update content/docs/handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index d8d36f632..6a7994fb6 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -11,7 +11,7 @@ redirect_from: Die Handhabung von Events in React-Elementen ist ähnlich wie bei DOM-Elementen. Es gibt nur ein paar syntaktische Unterschiede: * Events in React werden nicht in Kleinbuchstaben, sondern in camelCase benannt. -* In JSX wird eine Funktion als Eventhandler übergeben und kein String. +* In JSX übergibst du eine Funktion als Eventhandler und keinen String. Zum Beispiel dieses HTML: From 72c393a4d39d52ada4ab3865fa9b187190702818 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 26 Feb 2019 10:01:27 +0100 Subject: [PATCH 19/31] Update content/docs/handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 6a7994fb6..aed368ee7 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -54,7 +54,7 @@ function ActionLink() { } ``` -Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events gemäß der [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), also brauchst du dir keine Sorgen über browserübergreifende Kompatibilität machen. Mehr Informationen findest du im [`SyntheticEvent`](/docs/events.html) Referenz Handbuch. +Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events gemäß der [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), also brauchst du dir keine Sorgen über browserübergreifende Kompatibilität machen. Mehr Informationen findest du im [`SyntheticEvent`](/docs/events.html) Referenz Leitfaden. Mit React solltest du im Normalfall `addEventListener` nicht aufrufen müssen, um Events an DOM Elemente zu binden, nachdem sie erstellt worden. Stattdessen stellst du einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. From e5bfef1ab47ce94c1d0cd81ab70d4c9bcad5348b Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 26 Feb 2019 10:01:36 +0100 Subject: [PATCH 20/31] Update content/docs/handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index aed368ee7..20b18c8fe 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -58,7 +58,7 @@ Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events Mit React solltest du im Normalfall `addEventListener` nicht aufrufen müssen, um Events an DOM Elemente zu binden, nachdem sie erstellt worden. Stattdessen stellst du einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. -Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente einen Button, welcher zwischen den States "AN" und "AUS" wechselt: +Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente einen Button, der zwischen den States "AN" und "AUS" wechselt: ```js{6,7,10-14,18} class Toggle extends React.Component { From 0b2f85c081e4248a8e547d98b107a6992f270693 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 26 Feb 2019 10:01:42 +0100 Subject: [PATCH 21/31] Update content/docs/handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 20b18c8fe..444bb80d3 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -142,7 +142,7 @@ Das Problem mit dieser Syntax ist, dass jedes Rendern des `LoggingButton` einen ## Argumente an Eventhandler geben {#passing-arguments-to-event-handlers} -Innerhalb einer Schleife ist es üblich, einen zusätzlichen Parameter an den Eventhandler zu übergeben. Wenn beispielsweise `id` die Zeilen ID ist, würde folgendes funktionieren. +Innerhalb einer Schleife ist es üblich, einen zusätzlichen Parameter an den Eventhandler zu übergeben. Wenn beispielsweise `id` die ID einer Zeilen ist, würde folgendes funktionieren: ```js From 64cae7c813c87e98de0242b33ec5f43fa5acbda7 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 26 Feb 2019 10:01:48 +0100 Subject: [PATCH 22/31] Update content/docs/handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 444bb80d3..653f9426c 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -138,7 +138,7 @@ class LoggingButton extends React.Component { } ``` -Das Problem mit dieser Syntax ist, dass jedes Rendern des `LoggingButton` einen anderen Callback erzeugt. In den meisten Fällen, ist das ok. Wenn jedoch dieser Callback an tiefer gelegene Komoponenten als Prop weitergegeben wird, könnten diese sich ein weiteres Mal neu rendern. Generell empfehlen wir, um diese Art von Performance Problemen zu vermeinden, die Events im Konstruktor zu binden oder die class field Syntax zu verwenden. +Das Problem mit dieser Syntax ist, dass jedes Rendern des `LoggingButton` einen anderen Callback erzeugt. In den meisten Fällen, ist das ok. Wenn jedoch dieser Callback an tiefer gelegene Komoponenten als Prop weitergegeben wird, könnten diese sich ein weiteres Mal neu rendern. Generell empfehlen wir, um diese Art von Performance Problemen zu vermeiden, die Events im Konstruktor zu binden oder die class field Syntax zu verwenden. ## Argumente an Eventhandler geben {#passing-arguments-to-event-handlers} From d62f24c65ff2fcb9a854a7b942a6da84dccbd5c8 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 26 Feb 2019 10:01:54 +0100 Subject: [PATCH 23/31] Update content/docs/handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 653f9426c..318420288 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -91,7 +91,7 @@ ReactDOM.render( ); ``` -[**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) +[**Probier es auf CodePen aus**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) Mit der Bedeutung von `this` musst du in JSX Callbacks vorsichtig sein. In JavaScript sind Klassenmethoden nicht standardmäßig daran [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` an die Klasse zu binden und an `onClick` übergibst, wird `this` beim Aufruf der Funktion `undefined` sein. From 22f0fb01927d04920d60aacfcd2676200af36b2d Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 13:38:35 +0100 Subject: [PATCH 24/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 318420288..d7081912f 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -58,7 +58,7 @@ Hier ist `e` ein synthetisches Event. React definiert diese synthetischen Events Mit React solltest du im Normalfall `addEventListener` nicht aufrufen müssen, um Events an DOM Elemente zu binden, nachdem sie erstellt worden. Stattdessen stellst du einfach einen Listener zur Verfügung, wenn das Element initial gerendert wurde. -Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente einen Button, der zwischen den States "AN" und "AUS" wechselt: +Wenn du eine Komponente als [ES6 Klassse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) definierst, ist es ein gängiges Pattern, dass der Eventhandler eine Methode der Klasse ist. Zum Beispiel rendert diese `Toggle` Komponente einen Button, der zwischen den States "AN" und "AUS" wechselt: ```js{6,7,10-14,18} class Toggle extends React.Component { From 785dd8da1a10a0f6d0744a5122085e534618f046 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 14:19:07 +0100 Subject: [PATCH 25/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index d7081912f..e0f73cc0a 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -93,7 +93,7 @@ ReactDOM.render( [**Probier es auf CodePen aus**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) -Mit der Bedeutung von `this` musst du in JSX Callbacks vorsichtig sein. In JavaScript sind Klassenmethoden nicht standardmäßig daran [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` an die Klasse zu binden und an `onClick` übergibst, wird `this` beim Aufruf der Funktion `undefined` sein. +Mit der Bedeutung von `this` musst du in JSX Callbacks vorsichtig sein. In JavaScript sind Klassenmethoden nicht standardmäßig [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` an die Klasse zu binden und an `onClick` übergibst, wird `this` beim Aufruf der Funktion `undefined` sein. Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende wie `onClick={this.handleClick}`, binden. From af69801332cf36eebb3158db13899bc8c22516d8 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 14:19:13 +0100 Subject: [PATCH 26/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index e0f73cc0a..0bde9ac40 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -117,7 +117,7 @@ class LoggingButton extends React.Component { } ``` -Diese Syntax is standardmäßig in [Create React App](https://github.com/facebookincubator/create-react-app) aktiviert. +Diese Syntax ist standardmäßig in [Create React App](https://github.com/facebookincubator/create-react-app) aktiviert. Wenn du die class field Syntax nicht verwendest, hast du die Möglichkeit im Callback eine [Lambda-Funktion](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) zu verwenden: From a153c45cc3f3b8ad4ed5859331d9ceaaba699cb4 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 14:19:22 +0100 Subject: [PATCH 27/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 0bde9ac40..ea0cf1f03 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -95,7 +95,7 @@ ReactDOM.render( Mit der Bedeutung von `this` musst du in JSX Callbacks vorsichtig sein. In JavaScript sind Klassenmethoden nicht standardmäßig [gebunden](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Wenn du vergisst `this.handleClick` an die Klasse zu binden und an `onClick` übergibst, wird `this` beim Aufruf der Funktion `undefined` sein. -Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende wie `onClick={this.handleClick}`, binden. +Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende wie `onClick={this.handleClick}` binden. Wenn es dich stört immer `bind` aufzurufen, gibt es zwei Möglichkeiten dies zu umgehen. Wenn du die experimentelle [public class fields Syntax](https://babeljs.io/docs/plugins/transform-class-properties/) verwendest, kannst du Klassenfelder benutzen um Callbacks richtig zu binden: From e04bf81ccdc11c96dfa4a61b2e3d25daffec484d Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 14:19:31 +0100 Subject: [PATCH 28/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index ea0cf1f03..e096a32b0 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -97,7 +97,7 @@ Mit der Bedeutung von `this` musst du in JSX Callbacks vorsichtig sein. In JavaS Dies ist kein spezielles Verhalten von React; Es ist Teil davon, [wie Funktionen in JavaScript arbeiten](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generell solltest du eine Methode ohne `()` am Ende wie `onClick={this.handleClick}` binden. -Wenn es dich stört immer `bind` aufzurufen, gibt es zwei Möglichkeiten dies zu umgehen. Wenn du die experimentelle [public class fields Syntax](https://babeljs.io/docs/plugins/transform-class-properties/) verwendest, kannst du Klassenfelder benutzen um Callbacks richtig zu binden: +Wenn es dich stört immer `bind` aufzurufen, gibt es zwei Möglichkeiten dies zu umgehen. Wenn du die experimentelle [public class fields Syntax](https://babeljs.io/docs/plugins/transform-class-properties/) verwendest, kannst du Klassenfelder benutzen, um Callbacks richtig zu binden: ```js{2-6} class LoggingButton extends React.Component { From f7b088128935650aa0564671e79b843ab7e63197 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 14:19:45 +0100 Subject: [PATCH 29/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index e096a32b0..fc4a842a1 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -138,7 +138,7 @@ class LoggingButton extends React.Component { } ``` -Das Problem mit dieser Syntax ist, dass jedes Rendern des `LoggingButton` einen anderen Callback erzeugt. In den meisten Fällen, ist das ok. Wenn jedoch dieser Callback an tiefer gelegene Komoponenten als Prop weitergegeben wird, könnten diese sich ein weiteres Mal neu rendern. Generell empfehlen wir, um diese Art von Performance Problemen zu vermeiden, die Events im Konstruktor zu binden oder die class field Syntax zu verwenden. +Das Problem mit dieser Syntax ist, dass jedes Rendern des `LoggingButton` einen anderen Callback erzeugt. In den meisten Fällen, ist das ok. Wenn jedoch dieser Callback an tiefer gelegene Komoponenten als Prop weitergegeben wird, könnten diese sich ein weiteres Mal neu rendern. Generell empfehlen wir die Events im Konstruktor zu binden oder die class field Syntax zu verwenden, um diese Art von Performance Problemen zu vermeiden. ## Argumente an Eventhandler geben {#passing-arguments-to-event-handlers} From 4105cd253fa11b5eb81e076b8ff97e3f25b46d83 Mon Sep 17 00:00:00 2001 From: Johannes Klauss <6214415+JohannesKlauss@users.noreply.github.com> Date: Tue, 26 Feb 2019 14:20:15 +0100 Subject: [PATCH 30/31] Update content/docs/handling-events.md Co-Authored-By: ph1p --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index fc4a842a1..4366ad5ed 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -140,7 +140,7 @@ class LoggingButton extends React.Component { Das Problem mit dieser Syntax ist, dass jedes Rendern des `LoggingButton` einen anderen Callback erzeugt. In den meisten Fällen, ist das ok. Wenn jedoch dieser Callback an tiefer gelegene Komoponenten als Prop weitergegeben wird, könnten diese sich ein weiteres Mal neu rendern. Generell empfehlen wir die Events im Konstruktor zu binden oder die class field Syntax zu verwenden, um diese Art von Performance Problemen zu vermeiden. -## Argumente an Eventhandler geben {#passing-arguments-to-event-handlers} +## Argumente an Eventhandler übergeben {#passing-arguments-to-event-handlers} Innerhalb einer Schleife ist es üblich, einen zusätzlichen Parameter an den Eventhandler zu übergeben. Wenn beispielsweise `id` die ID einer Zeilen ist, würde folgendes funktionieren: From 9ef68b19cd068e76894bef8e3d2cf559b5231de7 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 26 Feb 2019 14:51:35 +0100 Subject: [PATCH 31/31] Update content/docs/handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 4366ad5ed..8ff83cbc4 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -29,7 +29,7 @@ ist in React ein wenig anders: ``` -Ein weiterer Unterschied ist, dass `false` nicht zurückgegeben werden kann, um das Standardverhalten von React zu unterbinden. Es muss explizit `preventDefault` aufgerufen werden. Um beispielsweise das Aufrufen eines Links in schlichtem HTML zu verhindern, kannst du folgendes schreiben: +Ein weiterer Unterschied ist, dass `false` nicht zurückgegeben werden kann, um das Standardverhalten von React zu unterbinden. Es muss explizit `preventDefault` aufgerufen werden. Um beispielsweise das Aufrufen eines Links in einfachem HTML zu verhindern, kannst du folgendes schreiben: ```html