File tree Expand file tree Collapse file tree 1 file changed +80
-0
lines changed Expand file tree Collapse file tree 1 file changed +80
-0
lines changed Original file line number Diff line number Diff line change 1
1
### React Advanced Workshop
2
2
3
3
Kiran Abburi
4
+
4
5
[ @kiran_abburi] ( https://twitter.com/kiran_abburi )
5
6
6
7
---
7
8
8
9
### Refs
9
10
* 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
+ ---
You can’t perform that action at this time.
0 commit comments