Skip to content

Commit 0883521

Browse files
committed
updated slides
1 parent 0a2cf47 commit 0883521

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed

slides/refs.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,89 @@
11
### React Advanced Workshop
22

33
Kiran Abburi
4+
45
[@kiran_abburi](https://twitter.com/kiran_abburi)
56

67
---
78

89
### Refs
910
* To imperatively modify a child outside of the typical dataflow
11+
* Provides access to DOM nodes or React component instances
12+
13+
---
14+
15+
### Usecases
16+
* Integrating with third party libraries like D3, jQuery
17+
* Managing focus of inputs
18+
* Triggering methods on components imperatively
19+
20+
---
21+
22+
### Refs
23+
```js
24+
class Form extends React.Component {
25+
componentDidMount() {
26+
this.inputRef.focus()
27+
}
28+
render() {
29+
return <input ref={ref => this.inputRef = ref} />
30+
}
31+
}
32+
```
33+
34+
---
35+
36+
### Refs
37+
```js
38+
class Form extends React.Component {
39+
constructor(props) {
40+
super(props)
41+
this.setInputRef = (ref) => this.inputRef = ref
42+
}
43+
componentDidMount() {
44+
this.inputRef.focus()
45+
}
46+
render() {
47+
return <input ref={this.setInputRef} />
48+
}
49+
}
50+
```
51+
52+
---
53+
54+
### Ref on react component
55+
* CustomInput should be class component
56+
57+
```
58+
class Form extends React.Component {
59+
render() {
60+
return <CustomInput ref={(ref) => this.inputRef = ref} />
61+
}
62+
}
63+
```
64+
65+
---
66+
67+
New Ref API in React 16.3
68+
* React.createRef
69+
* React.forwardRef
70+
71+
---
72+
73+
React.createRef
74+
```
75+
class Form extends React.Component {
76+
constructor(props) {
77+
super(props)
78+
this.inputRef = React.createRef()
79+
}
80+
componentDidMount() {
81+
this.inputRef.current.focus()
82+
}
83+
render() {
84+
return <input ref={this.inputRef} />
85+
}
86+
}
87+
```
88+
89+
---

0 commit comments

Comments
 (0)