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: src/content/reference/react/createRef.md
+27-20Lines changed: 27 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,23 @@
1
1
---
2
2
title: createRef
3
+
translationStatus: ai-draft
3
4
---
4
5
6
+
<Note>
7
+
8
+
Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react/createRef.md).
9
+
10
+
</Note>
11
+
5
12
<Pitfall>
6
13
7
-
`createRef`is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
14
+
`createRef`è usato soprattutto per i [componenti classe](/reference/react/Component). I componenti funzione di solito usano [`useRef`](/reference/react/useRef).
8
15
9
16
</Pitfall>
10
17
11
18
<Intro>
12
19
13
-
`createRef`creates a [ref](/learn/referencing-values-with-refs)object which can contain arbitrary value.
20
+
`createRef`crea un oggetto [ref](/learn/referencing-values-with-refs)che può contenere un valore arbitrario.
14
21
15
22
```js
16
23
classMyInputextendsComponent {
@@ -29,7 +36,7 @@ class MyInput extends Component {
29
36
30
37
### `createRef()` {/*createref*/}
31
38
32
-
Call`createRef`to declare a[ref](/learn/referencing-values-with-refs)inside a [class component.](/reference/react/Component)
39
+
Chiama`createRef`per dichiarare una[ref](/learn/referencing-values-with-refs)all'interno di un [componente classe](/reference/react/Component).
33
40
34
41
```js
35
42
import { createRef, Component } from'react';
@@ -40,31 +47,31 @@ class MyComponent extends Component {
40
47
// ...
41
48
```
42
49
43
-
[See more examples below.](#usage)
50
+
[Vedi altri esempi sotto.](#usage)
44
51
45
52
#### Parameters {/*parameters*/}
46
53
47
-
`createRef`takes no parameters.
54
+
`createRef`non accetta parametri.
48
55
49
56
#### Returns {/*returns*/}
50
57
51
-
`createRef`returns an object with a single property:
58
+
`createRef`restituisce un oggetto con una singola proprietà:
52
59
53
-
* `current`: Initially, it's set to the `null`. You can later set it to something else. If you pass the ref object to React as a`ref`attribute to a JSX node, React will set its `current` property.
60
+
* `current`: inizialmente è impostato su `null`. Puoi cambiarlo in seguito con un altro valore. Se passi l'oggetto ref a React come attributo`ref`su un nodo JSX, React imposterà la sua proprietà `current`.
54
61
55
62
#### Caveats {/*caveats*/}
56
63
57
-
* `createRef`always returns a *different* object. It's equivalent to writing `{ current:null }`yourself.
58
-
* In a function component, you probably want [`useRef`](/reference/react/useRef) instead which always returns the same object.
### Declaring a ref in a class component {/*declaring-a-ref-in-a-class-component*/}
72
+
### Dichiarare una ref in un componente classe {/*declaring-a-ref-in-a-class-component*/}
66
73
67
-
To declare a ref inside a [class component,](/reference/react/Component) call`createRef`and assign its result to a class field:
74
+
Per dichiarare una ref all'interno di un [componente classe](/reference/react/Component), chiama`createRef`e assegna il risultato a un campo di classe:
68
75
69
76
```js {4}
70
77
import { Component, createRef } from'react';
@@ -76,7 +83,7 @@ class Form extends Component {
76
83
}
77
84
```
78
85
79
-
If you now pass `ref={this.inputRef}`to an`<input>`in your JSX, React will populate `this.inputRef.current`with the input DOM node. For example, here is how you make a button that focuses the input:
86
+
Se passi `ref={this.inputRef}`a un`<input>`nel tuo JSX, React popolerà `this.inputRef.current`con il nodo DOM dell'input. Ad esempio, ecco come creare un pulsante che mette a fuoco l'input:
80
87
81
88
<Sandpack>
82
89
@@ -95,7 +102,7 @@ export default class Form extends Component {
95
102
<>
96
103
<input ref={this.inputRef} />
97
104
<button onClick={this.handleClick}>
98
-
Focus the input
105
+
Metti a fuoco l'input
99
106
</button>
100
107
</>
101
108
);
@@ -107,17 +114,17 @@ export default class Form extends Component {
107
114
108
115
<Pitfall>
109
116
110
-
`createRef`is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
117
+
`createRef` è usato soprattutto per i [componenti classe](/reference/react/Component). I componenti funzione di solito usano [`useRef`](/reference/react/useRef).
111
118
112
119
</Pitfall>
113
120
114
121
---
115
122
116
123
## Alternatives {/*alternatives*/}
117
124
118
-
### Migrating from a class with`createRef`to a function with`useRef` {/*migrating-from-a-class-with-createref-to-a-function-with-useref*/}
125
+
### Migrare da una classe con `createRef` a una funzione con `useRef` {/*migrating-from-a-class-with-createref-to-a-function-with-useref*/}
119
126
120
-
We recommend using function components instead of [class components](/reference/react/Component) in new code. If you have some existing class components using `createRef`, here is how you can convert them. This is the original code:
127
+
Nel codice nuovo consigliamo di usare componenti funzione al posto dei [componenti classe](/reference/react/Component). Se hai componenti classe esistenti che usano `createRef`, ecco come convertirli. Questo è il codice originale:
121
128
122
129
<Sandpack>
123
130
@@ -136,7 +143,7 @@ export default class Form extends Component {
136
143
<>
137
144
<input ref={this.inputRef} />
138
145
<button onClick={this.handleClick}>
139
-
Focus the input
146
+
Metti a fuoco l'input
140
147
</button>
141
148
</>
142
149
);
@@ -146,7 +153,7 @@ export default class Form extends Component {
146
153
147
154
</Sandpack>
148
155
149
-
When you [convert this component from a class to a function,](/reference/react/Component#alternatives) replace calls to `createRef`with calls to [`useRef`:](/reference/react/useRef)
156
+
Quando [converti questo componente da classe a funzione](/reference/react/Component#alternatives), sostituisci le chiamate a `createRef`con chiamate a [`useRef`](/reference/react/useRef):
150
157
151
158
<Sandpack>
152
159
@@ -164,7 +171,7 @@ export default function Form() {
0 commit comments