Merge pull request #24 from TomasHubelbauer/patch-1

swyxio · web-flow · commit ea6419fff4b6 · 2018-06-08T10:47:32.000-04:00
Contribute an alternative typing example for forms sample
diff --git a/README.md b/README.md
@@ -369,7 +369,21 @@ class App extends React.Component<{}, { // no props
 }
 ```
 
-[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
+Instead of typing the arguments and return values with `React.FormEvent<>` and `void`, you may alternatively apply types to the event handler itself (*contributed by @TomasHubelbauer*):
+
+```tsx
+  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    this.setState({text: e.currentTarget.value})
+  }
+```
+
+<details>
+
+<summary><b>Discussion</b></summary>
+
+Why two ways to do the same thing? The first method uses an inferred method signature `(e: React.FormEvent<HTMLInputElement>): void` and the second method enforces a type of the delegate provided by `@types/react`. So `React.ChangeEventHandler<>` is simply a "blessed" typing by `@types/react`, whereas you can think of the inferred method as more... *artisanally hand-rolled*. Either way it's a good pattern to know. [See our Github PR for more](https://github.com/sw-yx/react-typescript-cheatsheet/pull/24).
+
+</details>
 
 # Section 3: Advanced Guides
 
