Skip to content

Translate Forms #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GasimGasimzada merged 3 commits into from
Sep 11, 2019
Merged

Translate Forms #90

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
91a1cf9
Translate Forms
GasimGasimzada Aug 14, 2019
28a466e
Fix URL in heading for Controlled Components
GasimGasimzada Aug 14, 2019
11c3536
Fix form issues after self-review
GasimGasimzada Aug 15, 2019
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
120 changes: 60 additions & 60 deletions content/docs/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: forms
title: Forms
title: Anketlər
permalink: docs/forms.html
prev: lists-and-keys.html
next: lifting-state-up.html
Expand All @@ -9,27 +9,27 @@ redirect_from:
- "docs/forms-zh-CN.html"
---

HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
React-də HTML anket elementləri digər DOM elementlərindən fərqli işləyirlər. Çünki anket elementlərinin təbii şəkildə daxili vəziyyəti olur. Məsələn, gəlin sadə HTML-də yazılmış yalnız ad qəbul edən anketə baxaq:

```html
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Göndər" />
</form>
```

This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
İstifadəçi bu anketi göndərdiyində cari səhifə yeni səhifəyə keçir. Bu standard HTML anket davranışıdır. Əgər siz React-də bu davranışı istəyirsinizsə əlavə heç nə etmək lazım deyil. Lakin, bir çox halda anketin göndərilməsini idarə edən və istifadəçinin daxil etdiyi məlumatlardan istifadə edə bilən funksiyanın olması əlverişlidir. Bu funksionallığı tətbiq etmək üçün "kontrol olunan komponentlərdən" istifadə edilir.

## Controlled Components {#controlled-components}
## Kontrol Olunan Komponentlər {#controlled-components}

In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
HTML-də `<input>`, `<textarea>` və `<select>` kimi anket elementləri,. öz vəziyyətlərini saxlayır və istifadəçi daxil etməsi əsasında vəziyyəti yeniləyirlər. React-də isə dəyişən vəziyyət, komponentin state parametrində yerləşir və yalnız [`setState()`](/docs/react-component.html#setstate) ilə yenilənir.

We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
Biz bu iki konsepsiyanı birləşdirib React state-ini "vahid həqiqət mənbəyi" edə bilərik. Nəticədə, anketi render edən React komponenti, sonrakı istifadəçi daxil etmələri əsasında anketdə nə baş verdiyini idarə edir. Dəyəri React tərəfindən idarə edilən anket sahə elementi "kontrol olunan komponent" adlanır.

For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
Məsələn, əgər əvvəlki misalda istifadəçi anketi göndərdiyi zaman adı loq etmək istəyiriksə, anketi kontrol olunan komponent kimi yaza bilərik:

```javascript{4,10-12,24}
class NameForm extends React.Component {
Expand All @@ -46,54 +46,54 @@ class NameForm extends React.Component {
}

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

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

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

Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
Anket elementində `value` atributu təyin edildiyindən, anketin göstərdiyi dəyər həmişə `this.state.value` olacaq və React state-i anket üçün vahid həqiqə mənbəyi olacaq. `handleChange` hadisə işləyicisi hər klaviş tıklamasında çağrılıb React state-ini yenilədiyindən anket sahəsində göstərilən dəyər həmişə yeni olacaq.

With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
Kontrol olunan komponentdə, hər state dəyişikliyi üçün uyğun olan idarə edici funksiya olur. Bu funksiya, istifadəçi daxil etməsinin dəyişməsini və təsdiq edilməsini asanlaşdırır. Məsələn, əgər yazılan adların böyük hərf ilə saxlanmasını istəyiriksə `handleChange` funksiyasını aşağıdaki kimi dəyişə bilərik:

```javascript{2}
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
```

## The textarea Tag {#the-textarea-tag}
## textarea Təqi {#the-textarea-tag}

In HTML, a `<textarea>` element defines its text by its children:
HTML-də `<textarea>` elementinin yazısı uşaq tərəfindən təyin edilir:

```html
<textarea>
Hello there, this is some text in a text area
Salam, bu yazı sahəsində yerləşən bir mətndir
</textarea>
```

In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
React-də isə `<textarea>` üçün `value` atributundan istifadə edilir. Bu, `<textarea>` ilə bir-sətrli anket sahəsinin işləməsini uyğunlaşdırır:

```javascript{4-6,12-14,26}
class EssayForm extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Please write an essay about your favorite DOM element.'
value: 'Sevdiyiniz DOM elementi haqqında esse yazın.'
};

this.handleChange = this.handleChange.bind(this);
Expand All @@ -105,40 +105,40 @@ class EssayForm extends React.Component {
}

handleSubmit(event) {
alert('An essay was submitted: ' + this.state.value);
alert('Göndərilən esse: ' + this.state.value);
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Essay:
Esse:
<textarea value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Göndər" />
</form>
);
}
}
```

Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
Nəzərə alın ki, `this.state.value` konstruktorda inisializasiya olunduğundan yazı sahəsi hər hansı bir mətn ilə başlayacaq.

## The select Tag {#the-select-tag}
## select Təqi {#the-select-tag}

In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
HTML-də drop-down siyahısı düzəltmək üçün `<select>` işlədilir. Məsələn, aşağıda göstərilən HTML kodu dadlar üçün drop-down siyahısı düzəldir:

```html
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
<option value="grapefruit">Qreypfrut</option>
<option value="lime">Laym</option>
<option selected value="coconut">Kokos</option>
<option value="mango">Manqo</option>
</select>
```

Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
Nəzərə alın ki, Kokos seçimində `selected` atributu olduğundan, bu seçim ilk seçilmiş olacaq. React-də `selected` atributu əvəzinə ana `select` təqinin `value` atributundan istifadə edilir. Kontrol olunan komponentdə yeniliyi yalnız bir yerdə təyin etmək əlverişlidir:

```javascript{4,10-12,24}
class FlavorForm extends React.Component {
Expand All @@ -155,56 +155,56 @@ class FlavorForm extends React.Component {
}

handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
alert('Ən sevdiyiniz dad: ' + this.state.value);
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
Sevdiyiniz dadı seçin:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
<option value="grapefruit">Qreypfrut</option>
<option value="lime">Laym</option>
<option value="coconut">Kokos</option>
<option value="mango">Manqo</option>
</select>
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Göndər" />
</form>
);
}
}
```

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

Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
React, `<input type="text">`, `<textarea>` və `<select>` elementlərinin eyni formada işləməsini təmin edir. Kontrol olunan komponent tətbiq edə bilmək üçün bu elementlər `value` atributu qəbul edirlər.

> Note
> Qeyd
>
> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
> `select` təqində bir neçə seçimi seçə bilmək üçün `value` atributuna massiv göndərə bilərsiniz:
>
>```js
><select multiple={true} value={['B', 'C']}>
>```

## The file input Tag {#the-file-input-tag}
## Fayl daxil etmə 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).
HTML-də `<input type="file">` təqi istifadəçiyə bir və ya bir neçə faylı cihazın yaddaşından seçib serverə yükləməyə və ya [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) ilə JavaScript-də manipulyasiya etməyə icazə verir.

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

Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
Bu elementin dəyərinin yalnız oxuna bilən olduğundan, bu element React-də **kontrolsuz** komponent olur. [Gələcək sənədlərdə](/docs/uncontrolled-components.html#the-file-input-tag) bu və digər kontrolsuz komponentlərdən danışacağıq.

## Handling Multiple Inputs {#handling-multiple-inputs}
## Bir Neçə Daxil Olmanın İdarəsi {#handling-multiple-inputs}

When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
Əgər bir neçə `input` elementini idarə etmək istəyirsinizsə hər elementə `name` atributu əlavə edərək hadisə işləyicisinin `event.target.name` dəyəri əsasında hansı anket sahəsini yeniləyəcəyini müəyyənləşdirin.

For example:
Məsələn:

```javascript{15,18,28,37}
class Reservation extends React.Component {
Expand Down Expand Up @@ -232,7 +232,7 @@ class Reservation extends React.Component {
return (
<form>
<label>
Is going:
Gedirsiniz:
<input
name="isGoing"
type="checkbox"
Expand All @@ -241,7 +241,7 @@ class Reservation extends React.Component {
</label>
<br />
<label>
Number of guests:
Qonaqların sayı:
<input
name="numberOfGuests"
type="number"
Expand All @@ -254,31 +254,31 @@ class Reservation extends React.Component {
}
```

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

Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
Nəzərə alın ki, lazım olan state açarını, verilən anket sahəsi adı əsasında yeniləmək üçün ES6 [hesablanmış parametr adı](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) sintaksisindən istifadə etmişik:

```js{2}
this.setState({
[name]: value
});
```

It is equivalent to this ES5 code:
Bu kodun ES5 eqvivalenti aşağıdaki formadadır:

```js{2}
var partialState = {};
partialState[name] = value;
this.setState(partialState);
```

Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
Əlavə olaraq `setState()` avtomatik olaraq [yarı state-i cari state-ə birləşdirdiyindən](/docs/state-and-lifecycle.html#state-updates-are-merged), biz bu funksiyanı yalnız dəyişən dəyərlər ilə çağıra bilirik.

## Controlled Input Null Value {#controlled-input-null-value}
## Null Dəyərli Daxil Olmanın İdarəsi {#controlled-input-null-value}

Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
[Kontrol olunan komponentin](/docs/forms.html#controlled-components) `value` propunu təyin etdikdə istifadəçinin anket sahəsini dəyişməsini idarə edə bilərsiniz. Əgər `value` təyin edildiyindən asılı olmayaraq anket sahəsinin dəyəri dəyişə bilirsə, siz istəmədən `value`-nu `undefined` və `null` ilə təyin etmiş ola bilərsiniz.

The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
Aşağıdaki kod bu problemi göstərir. (Anket sahəsi ilkin olaraq dəyişə bilmir amma bir zamandan sonra dəyişə bilir.)

```javascript
ReactDOM.render(<input value="hi" />, mountNode);
Expand All @@ -289,10 +289,10 @@ setTimeout(function() {

```

## Alternatives to Controlled Components {#alternatives-to-controlled-components}
## Kontrol Olunan Komponentlərə Alternativlər {#alternatives-to-controlled-components}

It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
Hər bir məlumat dəyişikliyi üçün hadisə işləyicisi yazmaq və bütün daxil olma state-lərini React komponentindən keçirmək yorucu ola bilər. Mövcud kodu React-ə çevirdikdə və ya React applikasiyasını React olmayan kitabxana ilə inteqrasiya etdikdə bu problem xüsusi ilə yorucu ola bilər. Belə hallarda anket sahələrini başqa formada idarə etmək üçün [kontrolsuz komponentləri](/docs/uncontrolled-components.html) gözdən keçirin.

## Fully-Fledged Solutions {#fully-fledged-solutions}
## Tam Yazılmış Həll {#fully-fledged-solutions}

If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
Əgər sizə təsdiq etməsi olan, ziyarət edilən elementləri izləyə bilən və anket göndərməsini idarə edən tam həll lazımdırsa, ən populyar olan [Formik](https://jaredpalmer.com/formik) kitabxanasına baxın. Lakin bu kitabxana state-in idarə edilməsi və kontrol olunan komponentlərin prinsipləri əsasında düzəldilib. Bu səbəbdən bu konsepsiyaları öyrənməkdən çəkinməyin.