You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/refs-and-the-dom.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -94,12 +94,13 @@ React will assign the `value` property with the DOM element when the component m
94
94
95
95
When the `ref` attribute is used on a custom component declared as a class, the `ref` object receives the mounted instance of the component as its `value`. For example, if we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting:
96
96
97
-
```javascript{4,12}
97
+
```javascript{4,7,12}
98
98
class AutoFocusTextInput extends React.Component {
99
99
constructor(props) {
100
100
super(props);
101
101
this.textInput = React.createRef();
102
102
}
103
+
103
104
componentDidMount() {
104
105
this.textInput.value.focusTextInput();
105
106
}
@@ -124,7 +125,7 @@ class CustomTextInput extends React.Component {
124
125
125
126
**You may not use the `ref` attribute on functional components** because they don't have instances:
126
127
127
-
```javascript{1,8,12}
128
+
```javascript{1,8,13}
128
129
function MyFunctionalComponent() {
129
130
return <input />;
130
131
}
@@ -167,7 +168,7 @@ function CustomTextInput(props) {
167
168
onClick={handleClick}
168
169
/>
169
170
</div>
170
-
);
171
+
);
171
172
}
172
173
```
173
174
@@ -211,7 +212,7 @@ This works even though `CustomTextInput` is a functional component. Unlike the s
211
212
212
213
Another benefit of this pattern is that it works several components deep. For example, imagine `Parent` didn't need that DOM node, but a component that rendered `Parent` (let's call it `Grandparent`) needed access to it. Then we could let the `Grandparent` specify the `inputRef` prop to the `Parent`, and let `Parent` "forward" it to the `CustomTextInput`:
0 commit comments