Skip to content

Commit 834a4bd

Browse files
karpiuMGjakubdrozdek
authored andcommitted
Translate "Uncontrolled components" page (#173)
1 parent c22a113 commit 834a4bd

File tree

2 files changed

+22
-25
lines changed

2 files changed

+22
-25
lines changed
Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
id: uncontrolled-components
3-
title: Uncontrolled Components
3+
title: Komponenty niekontrolowane
44
permalink: docs/uncontrolled-components.html
55
---
66

7-
In most cases, we recommend using [controlled components](/docs/forms.html#controlled-components) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
7+
W większości przypadków zalecamy stosowanie [komponentów kontrolowanych](/docs/forms.html#controlled-components) do implementacji formularzy. W komponencie kontrolowanym, dane formularza są obsługiwane przez komponent reactowy. Alternatywą są komponenty niekontrolowane, w których dane formularza są obsługiwane przez sam DOM.
88

9-
To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM.
9+
Aby stworzyć komponent niekontrolowany, zamiast pisać funkcję obsługującą każdą zmianę stanu, możesz [użyć właściwości ref](/docs/refs-and-the-dom.html), aby uzyskać wartości formularza z DOM.
1010

11-
For example, this code accepts a single name in an uncontrolled component:
11+
Na przykład, ten kod akceptuje pojedynczą nazwę w komponencie niekontrolowanym:
1212

1313
```javascript{5,9,18}
1414
class NameForm extends React.Component {
@@ -19,66 +19,65 @@ class NameForm extends React.Component {
1919
}
2020
2121
handleSubmit(event) {
22-
alert('A name was submitted: ' + this.input.current.value);
22+
alert('Podano następujące imię: ' + this.input.current.value);
2323
event.preventDefault();
2424
}
2525
2626
render() {
2727
return (
2828
<form onSubmit={this.handleSubmit}>
2929
<label>
30-
Name:
30+
Imię:
3131
<input type="text" ref={this.input} />
3232
</label>
33-
<input type="submit" value="Submit" />
33+
<input type="submit" value="Wyślij" />
3434
</form>
3535
);
3636
}
3737
}
3838
```
3939

40-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
40+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
4141

42-
Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
42+
Ponieważ komponent niekontrolowany zachowuje źródło prawdy w DOM, czasami łatwiej jest zintegrować kod reactowy z kodem niereactowym, gdy używa się komponentów niekontrolowanych. Użycie komponentów niekontrolowanych pozwala zaimplementować formularz "na szybko" dzięki mniejszej ilości kodu. Zwykle jednak powinno używać się komponentów kontrolowanych.
4343

44-
If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
44+
Jeśli nadal nie jest jasne, jakiego rodzaju komponentu należy użyć w konkretnej sytuacji, pomocny może okazać się [ten artykuł o kontrolowanych i niekontrolowanych polach formularza](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/).
4545

46-
### Default Values {#default-values}
46+
### Wartości domyślne {#default-values}
4747

48-
In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
48+
W reactowym cyklu życia renderowania, wartość atrybutu `value` przypisanego do elementów formularza zastąpi wartość w DOM. W przypadku komponentu niekontrolowanego często zależy nam, aby to React określił wartość początkową, ale by kolejne aktualizacje pozostały niekontrolowane. Aby obsłużyć ten przypadek, zamiast atrybutu `value` można podać atrybut `defaultValue`.
4949

5050
```javascript{7}
5151
render() {
5252
return (
5353
<form onSubmit={this.handleSubmit}>
5454
<label>
55-
Name:
55+
Imię:
5656
<input
5757
defaultValue="Bob"
5858
type="text"
5959
ref={this.input} />
6060
</label>
61-
<input type="submit" value="Submit" />
61+
<input type="submit" value="Wyślij" />
6262
</form>
6363
);
6464
}
6565
```
6666

67-
Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
67+
Podobnie `<input type="checkbox">` i `<input type="radio">` obsługują atrybut `defaultChecked`, a `<select>` i `<textarea>` obsługują `defaultValue`.
6868

69-
## The file input Tag {#the-file-input-tag}
69+
## Znacznik `input` dla plików {#the-file-input-tag}
7070

71-
In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
71+
W HTML-u `<input type="file">` pozwala użytkownikowi wybrać z pamięci urządzenia jeden lub więcej plików, które mają zostać przesłane na serwer lub obsłużone przez JavaScript za pomocą [interfejsu File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
7272

7373
```html
7474
<input type="file" />
7575
```
7676

77-
In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
77+
W Reakcie `<input type="file" />` jest zawsze komponentem niekontrolowanym, ponieważ jego wartość może ustawić tylko użytkownik - nie można jej ustawić programowo.
7878

79-
You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
79+
Do interakcji z plikami należy używać interfejsu File API. Poniższy przykład pokazuje, jak utworzyć [odwołanie do węzła DOM](/docs/refs-and-the-dom.html), aby uzyskać dostęp do plików za pomocą procedury obsługi wysłania formularza:
8080

8181
`embed:uncontrolled-components/input-type-file.js`
8282

8383
[](codepen://uncontrolled-components/input-type-file)
84-

examples/uncontrolled-components/input-type-file.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ class FileInput extends React.Component {
99
// highlight-range{4}
1010
event.preventDefault();
1111
alert(
12-
`Selected file - ${
13-
this.fileInput.current.files[0].name
14-
}`
12+
`Wybrany plik - ${this.fileInput.current.files[0].name}`
1513
);
1614
}
1715

@@ -20,11 +18,11 @@ class FileInput extends React.Component {
2018
return (
2119
<form onSubmit={this.handleSubmit}>
2220
<label>
23-
Upload file:
21+
Prześlij plik:
2422
<input type="file" ref={this.fileInput} />
2523
</label>
2624
<br />
27-
<button type="submit">Submit</button>
25+
<button type="submit">Wyślij</button>
2826
</form>
2927
);
3028
}

0 commit comments

Comments
 (0)