Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions content/docs/uncontrolled-components.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: uncontrolled-components
title: Uncontrolled Components
title: Kontrolsuz Komponentlər
permalink: docs/uncontrolled-components.html
---

In most cases, we recommend using [controlled components](/docs/forms.html) 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.
Biz çox halda, anketləri tətbiq etmək üçün [kontrol olunan komponentlər](/docs/forms.html) işlətməyi tövsiyyə edirik. Kontrol olunan komponentlərdə anket məlumatları React komponenti tərəfindən idarə olunur. Buna alternativ kontrolsuz komponentlərdir. Bu komponentlərdə anket məlumatları DOM tərəfindən idarə olunur.

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.
Kontrolsuz komponent işlətdikdə DOM-dan anket dəyərlərini almaq üçün hadisə işləyiciləri ilə state-i yeniləmək əvəzinə [ref-dən istifadə edə bilərsiniz](/docs/refs-and-the-dom.html).

For example, this code accepts a single name in an uncontrolled component:
Məsələn, aşağıdakı kodda kontrol olunmayan komponent tək ad qəbul edir:

```javascript{5,9,18}
class NameForm extends React.Component {
Expand All @@ -19,64 +19,64 @@ class NameForm extends React.Component {
}

handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
alert('Göndərilən ad: ' + this.input.current.value);
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
Ad:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Göndər" />
</form>
);
}
}
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
[**CodePen-də sınayın**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)

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.
Kontrolsuz komponentlərdə həqiqət mənbəyi DOM-da saxlanır. Bu səbədən, kontrolsuz komponentlər ilə React React olmayan kodları inteqrasiya etmək daha asandır. Komponentlər kontrolsuz olduqda yazılmış kodun həcmi daha kiçik ola bilər. Əks halda, kontrol olunan komponentlərdən istifadə edin.

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.
Əgər xüsusi ssenaridə hansı tipli komponenti işlətməyi bilmirsinizsə, [kontrol olunan və kontrolsuz anket sahələrinin müqayisəsi yazısını](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) faydalı tapa bilərsiniz.

### Default Values {#default-values}
### Təyin Olunmayan Dəyərlər {#default-values}

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`.
React-in render zamanı anket elementlərinin `value` atribut dəyəri DOM dəyərlərininin üzərindən yazılacaq. Kontrolsuz komponentlərdə təyin olunmayan dəyərlərin React tərəfindən bildirilməsini sonrakı yeniliklərin isə kontrolsuz olmasını istəyə bilərsiniz. Bu ssenari üçün `value` atributu yerinə `defaultValue` atributundan istifadə edə bilərsiniz.

```javascript{7}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
Ad:
<input
defaultValue="Bob"
defaultValue="Kamal"
type="text"
ref={this.input} />
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Göndər" />
</form>
);
}
```

Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
Eyni formada, `<input type="checkbox">` `<input type="radio">` elementləri `defaultChecked`, `<select>` `<textarea>` elementləri isə `defaultValue` atributlarını dəstəkləyirlər.

## The file input Tag {#the-file-input-tag}
## Fayl anket sahəsi Təqi {#the-file-input-tag}

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).
İstifadəçinin sistem yaddaşından bir və ya bir neçə faylı seçib serverə yükləmək və ya [Fayl API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) ilə JavaScript-də manipulyasiya etmək üçün HTML `<input type="file">` təqindən istifadə edilir:

```html
<input type="file" />
```

In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
`<input type="file" />` elementinin dəyəri yalnız istifadəçi (proqram tərəfindən mümkün deyil) tərəfindən təyin edilir. Bu səbəbdən, bu element React-də həmişə kontrolsuz komponentdir.

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:
İstifadəçi tərəfindən seçilmiş fayllar üzərində əməliyyatlar üçün Fayl API-ından istifadə edin. Aşağıdakı nümunədə, göndərmə işləyicisindən fayllardan istifadə edə bilmək üçün [DOM noduna ref](/docs/refs-and-the-dom.html) əlavə olunur:

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

Expand Down
6 changes: 3 additions & 3 deletions examples/uncontrolled-components/input-type-file.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class FileInput extends React.Component {
// highlight-range{4}
event.preventDefault();
alert(
`Selected file - ${
`Seçilmiç fayl - ${
this.fileInput.current.files[0].name
}`
);
Expand All @@ -20,11 +20,11 @@ class FileInput extends React.Component {
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
Fayl yüklə:
<input type="file" ref={this.fileInput} />
</label>
<br />
<button type="submit">Submit</button>
<button type="submit">Göndər</button>
</form>
);
}
Expand Down