Merged

Contribute an alternative typing example for forms sample #24

Changes from all commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d5b7133
Contribute an alternative typing example for forms sample
TomasHubelbauerJun 8, 2018
1bc5838
shorten React.ChangeEventHandler example and move to discussion
swyxioJun 8, 2018
4672769
Update README.md
swyxioJun 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Failed to load files.
Original file line numberDiff line numberDiff line change
Expand Up@@ -369,7 +369,21 @@ class App extends React.Component<{}, { // no props
}
```

[Something to add? File an issue](https://.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 PR for more](https://.com/sw-yx/react-typescript-cheatsheet/pull/24).

</details>

# Section 3: Advanced Guides

Expand Down