From 03cb324bd9aab11b97bda874ea703b1b2b0e5ba0 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Thu, 7 Mar 2019 18:01:30 +0330
Subject: [PATCH 01/13] initial persian translation - first draft

---
 content/docs/forms.md | 77 +++++++++++++++++++++----------------------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 1a8b599d5..da771c57c 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -1,6 +1,6 @@
 ---
 id: forms
-title: Forms
+title: کار با فرم ها
 permalink: docs/forms.html
 prev: lists-and-keys.html
 next: lifting-state-up.html
@@ -9,7 +9,7 @@ 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:
+المان های فرم HTML در نحوه ی کارکرد با المان های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المان ها وضعیت ورودی خود را به صورت داخلی نگه داری می کنند. برای مثال، این کد فرم که به صورت HTML ساده نوشته شده است از کاربر یک نام دریافت می کند:
 
 ```html
 <form>
@@ -21,15 +21,15 @@ HTML form elements work a little bit differently from other DOM elements in Reac
 </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".
+عملکرد این فرم به صورت رفتار پیش فرض فرم HTML می باشد که کاربر پس از ثبت فرم به صفحه ی جدید انتقال پیدا می کند. اگر این رفتار را در ری اکت می خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه حل مناسب تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت های کنترل شده" می باشد.
 
-## Controlled Components {#controlled-components}
+## کامپوننت های کنترل شده {#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، المان های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه می دارند و بر اساس ورودی کاربر آن را به روز رسانی می کنند. در ری اکت، به طور معمول وضعیت قابل تغییر در state کامپوننت ها نگه داری می شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) می توان مقادیر ذخیره شده آن را بروز رسانی کرد.
 
-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".
+ما می توانیم با قرار دادن قابلیت state کامپوننت در ری اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر می باشد. المان ورودی داده در فرم که مقادیر وارد شده آن توسط ری اکت به این صورت کنترل می شود را "کامپوننت کنترل شده" می نامند.
 
-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:
+به عنوان مثال، اگر بخواهیم در کد بالا پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، می توانیم فرم را به صورت یک کامپوننت کنترل شده به این صورت بنویسیم:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -64,11 +64,11 @@ class NameForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**کد بالا را در CodePen امتحان کنید**](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.
+از آنجایی که خصوصیت `value` در المان فرم ما ست شده است، مقداری که نمایش داده می شود همیشه مقداری که در `this.state.value` نگه داشته می شود خواهد بود، که باعث می شود state کامپوننت در ری اکت به عنوان منبع نگه داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر اجرا می شود و مقدار ذخیره شده در state ری اکت را بروز رسانی می کند، مقدار نمایش داده شده در المان هم به همراه تایپ کردن کاربر بروز رسانی می شود.
 
-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:
+در کامپوننت های کنترل شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف می کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان می کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت می نویسیم:
 
 ```javascript{2}
 handleChange(event) {
@@ -76,9 +76,9 @@ handleChange(event) {
 }
 ```
 
-## The textarea Tag {#the-textarea-tag}
+## تگ textarea {#the-textarea-tag}
 
-In HTML, a `<textarea>` element defines its text by its children:
+در HTML، متنی که در المان `<textarea>` نمایش داده می شود، بین تگ باز و بسته این المان تعریف می شود:
 
 ```html
 <textarea>
@@ -86,7 +86,7 @@ In HTML, a `<textarea>` element defines its text by its children:
 </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:
+در ری اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده می کند. از این رو، فرمی که دارای المان `<textarea>` هست را می توان خیلی شبیه به فرم با ورودی های تک خطی نوشت: 
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -123,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
+توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه می شود، بنابراین المان متن چند خطی، حاوی متن در رندر اولیه می باشد.
 
-## The select Tag {#the-select-tag}
+## تگ select {#the-select-tag}
 
-In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
+در HTML، تگ `<select>` یک منو کشویی نمایش می دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم های مختلف نمایش می دهد:
 
 ```html
 <select>
@@ -138,7 +138,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 </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:
+توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المان تعریف شده است. ری اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده می کند. این روش در کامپوننت های کنترل شده کار را راحت تر می کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -178,33 +178,33 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**کد بالا را در CodePen امتحان کنید**](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.
+در کل، این نوع ساختار باعث می شود که تمام المان های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت می کنند که می توان با آن عملکرد کامپوننت کنترل شده را پیاده سازی کنید.
 
-> Note
+> نکته
 >
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
+> شما می توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه می دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
 
-## The file input Tag {#the-file-input-tag}
+## تگ file input {#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، کد `<input type="file">` فیلد ورودی می سازد که به کاربر اجازه می دهد یک یا چند فایل را از محل ذخیره سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوااسکریپت بر روی فایل های انتخابی عملیاتی انجام شود.
 
 ```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).
+به دلیل اینکه مقدار این المان فقط قابل خواندن می باشد، این المان در ری اکت یک کامپوننت **کنترل نشده** می باشد. در مورد این کامپوننت و دیگر کامپوننت های کنترل نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
 
-## Handling Multiple Inputs {#handling-multiple-inputs}
+## به کار بردن چند فیلد ورودی {#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`.
+زمانی که نیاز دارید چند فیلد ورودی `input` کنترل شده به کار ببرید، می توانید یک خصوصیت `name` برای هر یک از المان ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد می توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به روز شود.
 
-For example:
+برای مثال:
 
 ```javascript{15,18,28,37}
 class Reservation extends React.Component {
@@ -254,9 +254,9 @@ class Reservation extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**کد بالا را در CodePen امتحان کنید**](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:
+توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) نحوه نگارش ES6 جهت به روز کردن مقدار ذخیره شده مرتبط با کلید هم نام با فیلد ورودی استفاده شده است:
 
 ```js{2}
 this.setState({
@@ -264,21 +264,20 @@ this.setState({
 });
 ```
 
-It is equivalent to this ES5 code:
+معادل عملیات بالا به صورت کد ES5 به این صورت می باشد:
 
 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```
+همچنین از آن جایی که تابع `setState()` به صورت خودکار می تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت های به روز شده را زمان صدا زدن این تابع ارسال کنیم.
 
-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.
+## فیلد ورودی کنترل شده با مقدار Null {#controlled-input-null-value}
 
-## Controlled Input Null Value {#controlled-input-null-value}
+تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر می شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل تغییر توسط کاربر می باشد، ممکن است مقدار خصوصیت `value` را به صورت تصادفی `undefined` و یا `null` ست کرده باشید.
 
-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`.
-
-The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
+نمونه کد زیر این رفتار را نمایش می دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل تغییر نمی باشد، اما پس از گذشت زمان کوتاه قابل تغییر می شود.)
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);
@@ -289,10 +288,10 @@ setTimeout(function() {
 
 ```
 
-## Alternatives to Controlled Components {#alternatives-to-controlled-components}
+## راه حل های جایگزین کامپوننت های کنترل شده {#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.
+در بعضی مواقع استفاده از کامپوننت های کنترل شده ممکن است خسته کننده باشد، چون که شما باید به ازای هر event که به هر شکل داده ها را تغییر می دهد یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه دارنده وضعیت فیلد های ورودی در ری اکت ارسال کنید. پیاده سازی این رفتار به مرور می تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری اکت تبدیل کنید و یا برنامه توسعه یافته با ری اکت را با یک برنامه غیر ری اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت های کنترل نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد های ورودی فرم می باشد.
 
-## Fully-Fledged Solutions {#fully-fledged-solutions}
+## راه حل تمام عیار {#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.
+اگر به دنبال یک راه حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت کردن بر فیلد های طی شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب ترین گزینه ها می باشد. با این حال این راه حل بر اساس اصول کامپوننت های کنترل شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.

From 296e208fddc2643b2645a37422dae72e7c101cf5 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Sat, 9 Mar 2019 19:25:36 +0330
Subject: [PATCH 02/13] fixed issues regarding visual formatting and
 translation

---
 content/docs/forms.md | 64 +++++++++++++++++++++----------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index da771c57c..25fa6a42e 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -1,6 +1,6 @@
 ---
 id: forms
-title: کار با فرم ها
+title: فرم‌ها
 permalink: docs/forms.html
 prev: lists-and-keys.html
 next: lifting-state-up.html
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-المان های فرم HTML در نحوه ی کارکرد با المان های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المان ها وضعیت ورودی خود را به صورت داخلی نگه داری می کنند. برای مثال، این کد فرم که به صورت HTML ساده نوشته شده است از کاربر یک نام دریافت می کند:
+المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت ورودی خود را ‌به‌صورت داخلی ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
 
 ```html
 <form>
@@ -21,15 +21,15 @@ redirect_from:
 </form>
 ```
 
-عملکرد این فرم به صورت رفتار پیش فرض فرم HTML می باشد که کاربر پس از ثبت فرم به صفحه ی جدید انتقال پیدا می کند. اگر این رفتار را در ری اکت می خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه حل مناسب تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت های کنترل شده" می باشد.
+عملکرد این فرم ‌به‌صورت رفتار پیش فرض فرم HTML ‌می‌باشد که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند. اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه‌حل مناسب‌تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
 
-## کامپوننت های کنترل شده {#controlled-components}
+## کامپوننت‌های کنترل‌شده {#controlled-components}
 
-در HTML، المان های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه می دارند و بر اساس ورودی کاربر آن را به روز رسانی می کنند. در ری اکت، به طور معمول وضعیت قابل تغییر در state کامپوننت ها نگه داری می شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) می توان مقادیر ذخیره شده آن را بروز رسانی کرد.
+در HTML، المنت‌های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه ‌می‌دارند و بر اساس ورودی کاربر آن را به‌روز رسانی ‌می‌کنند. در ری‌اکت، به طور معمول وضعیت قابل‌تغییر در state کامپوننت‌ها ‌نگه‌داری ‌می‌شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) ‌می‌توان مقادیر ذخیره‌شده آن را بروز رسانی کرد.
 
-ما می توانیم با قرار دادن قابلیت state کامپوننت در ری اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر می باشد. المان ورودی داده در فرم که مقادیر وارد شده آن توسط ری اکت به این صورت کنترل می شود را "کامپوننت کنترل شده" می نامند.
+ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری‌اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر ‌می‌باشد. المنت ورودی داده در فرم که مقادیر وارد شده آن توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
 
-به عنوان مثال، اگر بخواهیم در کد بالا پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، می توانیم فرم را به صورت یک کامپوننت کنترل شده به این صورت بنویسیم:
+به عنوان مثال، اگر بخواهیم در کد پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده به این صورت بنویسیم:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -64,11 +64,11 @@ class NameForm extends React.Component {
 }
 ```
 
-[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-از آنجایی که خصوصیت `value` در المان فرم ما ست شده است، مقداری که نمایش داده می شود همیشه مقداری که در `this.state.value` نگه داشته می شود خواهد بود، که باعث می شود state کامپوننت در ری اکت به عنوان منبع نگه داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر اجرا می شود و مقدار ذخیره شده در state ری اکت را بروز رسانی می کند، مقدار نمایش داده شده در المان هم به همراه تایپ کردن کاربر بروز رسانی می شود.
+از آنجایی که خصوصیت `value` در المنت فرم ما ست شده است، مقداری که نمایش داده ‌می‌شود همیشه مقداری که در `this.state.value` نگه داشته ‌می‌شود خواهد بود، که باعث ‌می‌شود state کامپوننت در ری‌اکت به عنوان منبع ‌نگه‌داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر، اجرا ‌می‌شود و مقدار ذخیره‌شده در state ری‌اکت را بروز رسانی ‌می‌کند، مقدار نمایش داده شده در المنت هم به همراه تایپ کردن کاربر بروز رسانی ‌می‌شود.
 
-در کامپوننت های کنترل شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف می کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان می کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت می نویسیم:
+در کامپوننت‌های کنترل‌شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف ‌می‌کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان ‌می‌کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت ‌می‌نویسیم:
 
 ```javascript{2}
 handleChange(event) {
@@ -78,7 +78,7 @@ handleChange(event) {
 
 ## تگ textarea {#the-textarea-tag}
 
-در HTML، متنی که در المان `<textarea>` نمایش داده می شود، بین تگ باز و بسته این المان تعریف می شود:
+در HTML، متنی که در المنت `<textarea>` نمایش داده ‌می‌شود، بین تگ باز و بسته این المنت تعریف ‌می‌شود:
 
 ```html
 <textarea>
@@ -86,7 +86,7 @@ handleChange(event) {
 </textarea>
 ```
 
-در ری اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده می کند. از این رو، فرمی که دارای المان `<textarea>` هست را می توان خیلی شبیه به فرم با ورودی های تک خطی نوشت: 
+در ری‌اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده ‌می‌کند. از این رو، فر‌می‌که دارای المنت `<textarea>` هست را ‌می‌توان خیلی شبیه به فرم با ورودی‌های تک‌خطی نوشت: 
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -123,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه می شود، بنابراین المان متن چند خطی، حاوی متن در رندر اولیه می باشد.
+توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه ‌می‌شود، بنابراین المنت متن چند خطی، حاوی متن در رندر اولیه ‌می‌باشد.
 
 ## تگ select {#the-select-tag}
 
-در HTML، تگ `<select>` یک منو کشویی نمایش می دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم های مختلف نمایش می دهد:
+در HTML، تگ `<select>` یک منو کشویی نمایش ‌می‌دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم‌های مختلف نمایش ‌می‌دهد:
 
 ```html
 <select>
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المان تعریف شده است. ری اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده می کند. این روش در کامپوننت های کنترل شده کار را راحت تر می کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
+توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -178,13 +178,13 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-در کل، این نوع ساختار باعث می شود که تمام المان های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت می کنند که می توان با آن عملکرد کامپوننت کنترل شده را پیاده سازی کنید.
+در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن عملکرد کامپوننت کنترل‌شده را پیاده سازی کنید.
 
 > نکته
 >
-> شما می توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه می دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
+> شما ‌می‌توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه ‌می‌دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
@@ -192,17 +192,17 @@ class FlavorForm extends React.Component {
 
 ## تگ file input {#the-file-input-tag}
 
-در HTML، کد `<input type="file">` فیلد ورودی می سازد که به کاربر اجازه می دهد یک یا چند فایل را از محل ذخیره سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوااسکریپت بر روی فایل های انتخابی عملیاتی انجام شود.
+در HTML، کد `<input type="file">` فیلد ورودی ‌می‌سازد که به کاربر اجازه ‌می‌دهد یک یا چند فایل را از محل ذخیره‌سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوا اسکریپت بر روی فایل‌های انتخابی عملیاتی انجام شود.
 
 ```html
 <input type="file" />
 ```
 
-به دلیل اینکه مقدار این المان فقط قابل خواندن می باشد، این المان در ری اکت یک کامپوننت **کنترل نشده** می باشد. در مورد این کامپوننت و دیگر کامپوننت های کنترل نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
+به دلیل اینکه مقدار این المنت فقط قابل‌خواندن ‌می‌باشد، این المنت در ری‌اکت یک کامپوننت **کنترل‌نشده** ‌می‌باشد. در مورد این کامپوننت و دیگر کامپوننت‌های کنترل‌نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
 
 ## به کار بردن چند فیلد ورودی {#handling-multiple-inputs}
 
-زمانی که نیاز دارید چند فیلد ورودی `input` کنترل شده به کار ببرید، می توانید یک خصوصیت `name` برای هر یک از المان ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد می توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به روز شود.
+زمانی که نیاز دارید چند فیلد ورودی `input` کنترل‌شده به کار ببرید، ‌می‌توانید یک خصوصیت `name` برای هر یک از المنت‌ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد ‌می‌توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به‌روز شود.
 
 برای مثال:
 
@@ -254,9 +254,9 @@ class Reservation extends React.Component {
 }
 ```
 
-[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
 
-توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) نحوه نگارش ES6 جهت به روز کردن مقدار ذخیره شده مرتبط با کلید هم نام با فیلد ورودی استفاده شده است:
+توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) شیوه‌نگارش ES6 جهت به‌روز کردن مقدار ذخیره‌شده مرتبط با کلید هم‌نام با فیلد ورودی استفاده شده است:
 
 ```js{2}
 this.setState({
@@ -264,20 +264,20 @@ this.setState({
 });
 ```
 
-معادل عملیات بالا به صورت کد ES5 به این صورت می باشد:
+معادل عملیات بالا ‌به‌صورت کد ES5 به این صورت ‌می‌باشد:
 
 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```
-همچنین از آن جایی که تابع `setState()` به صورت خودکار می تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت های به روز شده را زمان صدا زدن این تابع ارسال کنیم.
+همچنین از آن جایی که تابع `setState()` ‌به‌صورت خودکار ‌می‌تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت‌های به‌روز شده را زمان صدا زدن این تابع ارسال کنیم.
 
-## فیلد ورودی کنترل شده با مقدار Null {#controlled-input-null-value}
+## فیلد ورودی کنترل‌شده با مقدار Null {#controlled-input-null-value}
 
-تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر می شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل تغییر توسط کاربر می باشد، ممکن است مقدار خصوصیت `value` را به صورت تصادفی `undefined` و یا `null` ست کرده باشید.
+تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر ‌می‌شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل‌تغییر توسط کاربر ‌می‌باشد، ممکن است مقدار خصوصیت `value` را ‌به‌صورت تصادفی `undefined` و یا `null` ست کرده باشید.
 
-نمونه کد زیر این رفتار را نمایش می دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل تغییر نمی باشد، اما پس از گذشت زمان کوتاه قابل تغییر می شود.)
+نمونه کد زیر این رفتار را نمایش ‌می‌دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل‌تغییر نمی‌باشد، اما پس از گذشت زمان کوتاه قابل‌تغییر ‌می‌شود.)
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);
@@ -288,10 +288,10 @@ setTimeout(function() {
 
 ```
 
-## راه حل های جایگزین کامپوننت های کنترل شده {#alternatives-to-controlled-components}
+## راه‌حل‌های جایگزین کامپوننت‌های کنترل‌شده {#alternatives-to-controlled-components}
 
-در بعضی مواقع استفاده از کامپوننت های کنترل شده ممکن است خسته کننده باشد، چون که شما باید به ازای هر event که به هر شکل داده ها را تغییر می دهد یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه دارنده وضعیت فیلد های ورودی در ری اکت ارسال کنید. پیاده سازی این رفتار به مرور می تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری اکت تبدیل کنید و یا برنامه توسعه یافته با ری اکت را با یک برنامه غیر ری اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت های کنترل نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد های ورودی فرم می باشد.
+در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده ممکن است خسته‌کننده باشد، چون که شما باید به ازای هر (event) که به هر شکل داده‌ها را تغییر ‌می‌دهد، یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه‌دارنده وضعیت فیلد‌های ورودی در ری‌اکت ارسال کنید. پیاده سازی این رفتار به مرور ‌می‌تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری‌اکت تبدیل کنید و یا برنامه توسعه یافته با ری‌اکت را با یک برنامه غیر ری‌اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد‌های ورودی فرم ‌می‌باشد.
 
-## راه حل تمام عیار {#fully-fledged-solutions}
+## راه‌حل تمام‌عیار {#fully-fledged-solutions}
 
-اگر به دنبال یک راه حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت کردن بر فیلد های طی شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب ترین گزینه ها می باشد. با این حال این راه حل بر اساس اصول کامپوننت های کنترل شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.
+اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.

From b84384e772a49d0127fb6846ddbe3ea5991f629a Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 16:34:48 +0330
Subject: [PATCH 03/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 25fa6a42e..f0df9e1c0 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -21,7 +21,7 @@ redirect_from:
 </form>
 ```
 
-عملکرد این فرم ‌به‌صورت رفتار پیش فرض فرم HTML ‌می‌باشد که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند. اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه‌حل مناسب‌تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
+این فرم رفتار پیش فرض فرم HTML  که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند را داراست . اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از موارد راه‌حل مناسب‌ این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
 
 ## کامپوننت‌های کنترل‌شده {#controlled-components}
 

From bdc71f5b5d03ec7ca81a950ccb3f75955e98809b Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:11:44 +0330
Subject: [PATCH 04/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index f0df9e1c0..b59a43d31 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -29,7 +29,7 @@ redirect_from:
 
 ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری‌اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر ‌می‌باشد. المنت ورودی داده در فرم که مقادیر وارد شده آن توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
 
-به عنوان مثال، اگر بخواهیم در کد پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده به این صورت بنویسیم:
+به عنوان مثال، اگر بخواهیم در مثال قبل در زمان ثبت فرم، نام نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده بنویسیم:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {

From 954bf4392c0e151272302c31069490e91a91f678 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:39:03 +0330
Subject: [PATCH 05/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index b59a43d31..310c09987 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -86,7 +86,7 @@ handleChange(event) {
 </textarea>
 ```
 
-در ری‌اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده ‌می‌کند. از این رو، فر‌می‌که دارای المنت `<textarea>` هست را ‌می‌توان خیلی شبیه به فرم با ورودی‌های تک‌خطی نوشت: 
+در عوض در ری‌اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده ‌می‌کند. با این روش، فر‌می‌ که دارای المنت `<textarea>` هست را ‌می‌توان خیلی شبیه به یک فرم با ورودی‌های تک‌خطی نوشت: 
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {

From b5146bde8ef1272812feb02020af94cc440be465 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:44:16 +0330
Subject: [PATCH 06/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 310c09987..fb643efee 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -127,7 +127,7 @@ class EssayForm extends React.Component {
 
 ## تگ select {#the-select-tag}
 
-در HTML، تگ `<select>` یک منو کشویی نمایش ‌می‌دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم‌های مختلف نمایش ‌می‌دهد:
+در HTML، تگ `<select>` یک لیست کشویی می‌سازد. برای مثال، کد HTML زیر یک لیست کشویی از طعم‌ها می‌سازد:
 
 ```html
 <select>

From 90043ada53f0e7a3db810fc2bd8100cd48db6bc6 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:59:51 +0330
Subject: [PATCH 07/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index fb643efee..1dd13b547 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -292,6 +292,6 @@ setTimeout(function() {
 
 در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده ممکن است خسته‌کننده باشد، چون که شما باید به ازای هر (event) که به هر شکل داده‌ها را تغییر ‌می‌دهد، یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه‌دارنده وضعیت فیلد‌های ورودی در ری‌اکت ارسال کنید. پیاده سازی این رفتار به مرور ‌می‌تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری‌اکت تبدیل کنید و یا برنامه توسعه یافته با ری‌اکت را با یک برنامه غیر ری‌اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد‌های ورودی فرم ‌می‌باشد.
 
-## راه‌حل تمام‌عیار {#fully-fledged-solutions}
+## راه‌حل‌های تمام‌عیار {#fully-fledged-solutions}
 
 اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.

From d39a976202dcc4b23443b0c38b0d55ec21bd1403 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 18:00:39 +0330
Subject: [PATCH 08/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 1dd13b547..610453776 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -277,7 +277,7 @@ this.setState(partialState);
 
 تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر ‌می‌شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل‌تغییر توسط کاربر ‌می‌باشد، ممکن است مقدار خصوصیت `value` را ‌به‌صورت تصادفی `undefined` و یا `null` ست کرده باشید.
 
-نمونه کد زیر این رفتار را نمایش ‌می‌دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل‌تغییر نمی‌باشد، اما پس از گذشت زمان کوتاه قابل‌تغییر ‌می‌شود.)
+نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.)
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);

From 1a06bf4d275bb8208f2d1527bb597d58feb4165f Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 18:02:13 +0330
Subject: [PATCH 09/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 610453776..0b9dbd813 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -275,7 +275,7 @@ this.setState(partialState);
 
 ## فیلد ورودی کنترل‌شده با مقدار Null {#controlled-input-null-value}
 
-تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر ‌می‌شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل‌تغییر توسط کاربر ‌می‌باشد، ممکن است مقدار خصوصیت `value` را ‌به‌صورت تصادفی `undefined` و یا `null` ست کرده باشید.
+تعریف value روی prop یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری کاربر از تغییر ورودی ‌می‌شود مگر این که خودتان بخواهید. اگر خصوصیت `value` را تعریف کرده‌اید اما ورودی هنوز قابل‌ ویرایش است، ممکن است مقدار `value` را ‌به‌صورت تصادفی به `undefined` و یا `null` قرار داده باشید.
 
 نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.)
 

From 20127c72511410485ff175c351678c87ad980b5b Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 20:45:27 +0330
Subject: [PATCH 10/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 0b9dbd813..f23c9038c 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
+توجه کنید که ابتدا گزینه Coconut  به خاطر خصوصیت `selected` انتخاب شده است. ری‌اکت به جای استفاده از خصوصیت `selected`، از خصوصیت `value` در تگ `select` ریشه استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده راحت‌تر است زیرا شما تنها نیاز به به‌روزرسانی آن در یک مکان دارید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {

From d5ff4209fff34c8e006168ba508c99d9c3a72d20 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 20:55:25 +0330
Subject: [PATCH 11/13] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index f23c9038c..6582509a9 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -180,7 +180,7 @@ class FlavorForm extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن عملکرد کامپوننت کنترل‌شده را پیاده سازی کنید.
+در کل، این نوع ساختار باعث ‌می‌شود که `<input type="text">`, `<textarea>` و `<select>`، همگی بسیار مشابه کار کنند. همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توانید با استفاده از آن کامپوننت کنترل‌شده را پیاده سازی کنید.
 
 > نکته
 >

From 75db61196e3b2f23bd6078b76e112523ba60f5f8 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Sun, 10 Mar 2019 21:28:36 +0330
Subject: [PATCH 12/13] updated translation locally

---
 content/docs/forms.md | 46 +++++++++++++++++++++----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 0b9dbd813..0718f4c68 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت ورودی خود را ‌به‌صورت داخلی ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
+المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت [ورودی] را در خود ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
 
 ```html
 <form>
@@ -21,13 +21,13 @@ redirect_from:
 </form>
 ```
 
-این فرم رفتار پیش فرض فرم HTML  که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند را داراست . اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از موارد راه‌حل مناسب‌ این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
+این فرم رفتار پیش فرض فرم HTML  که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند را داراست . اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بیشتر موارد، مناسب است که یک تابع جاوااسکریپت داشته‌باشیم که ثبت فرم را انجام می‌دهد و به داده‌هایی که کاربر در فرم وارد کرده است دسترسی دارد. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
 
 ## کامپوننت‌های کنترل‌شده {#controlled-components}
 
-در HTML، المنت‌های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه ‌می‌دارند و بر اساس ورودی کاربر آن را به‌روز رسانی ‌می‌کنند. در ری‌اکت، به طور معمول وضعیت قابل‌تغییر در state کامپوننت‌ها ‌نگه‌داری ‌می‌شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) ‌می‌توان مقادیر ذخیره‌شده آن را بروز رسانی کرد.
+در HTML، المنت‌های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه ‌می‌دارند و بر اساس ورودی کاربر آن را به‌روز رسانی ‌می‌کنند. در ری‌اکت، معمولا وضعیت قابل‌تغییر در state کامپوننت‌ها ‌نگه‌داری ‌می‌شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) به‌روز رسانی می‌شود.
 
-ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری‌اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر ‌می‌باشد. المنت ورودی داده در فرم که مقادیر وارد شده آن توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
+ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع حقیقت" [single source of truth] این دو را با هم ترکیب کنیم. آنگاه کامپوننت ری‌اکتی که فرم را رندر می‌کند، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر نیز ‌می‌باشد. یک المنت فرم ورودی داده که مقدارش توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
 
 به عنوان مثال، اگر بخواهیم در مثال قبل در زمان ثبت فرم، نام نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده بنویسیم:
 
@@ -66,9 +66,9 @@ class NameForm extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-از آنجایی که خصوصیت `value` در المنت فرم ما ست شده است، مقداری که نمایش داده ‌می‌شود همیشه مقداری که در `this.state.value` نگه داشته ‌می‌شود خواهد بود، که باعث ‌می‌شود state کامپوننت در ری‌اکت به عنوان منبع ‌نگه‌داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر، اجرا ‌می‌شود و مقدار ذخیره‌شده در state ری‌اکت را بروز رسانی ‌می‌کند، مقدار نمایش داده شده در المنت هم به همراه تایپ کردن کاربر بروز رسانی ‌می‌شود.
+از آن‌جایی که خصوصیت value روی المنت فرم ما قرار گرفته‌است، مقدار نمایش داده‌شده همیشه `this.state.value` که باعث ‌می‌شود state ری‌اکت به عنوان منبع ‌نگه‌داری داده و وضعیت ‌باشد. از آن‌جایی که `handleChange` با هر فشردن کلید برای به‌روز رسانی state ری‌اکت اجرا می‌شود، مقدار نمایش داده‌شده هم با تایپ کردن کاربر به‌روز‌رسانی خواهد شد.
 
-در کامپوننت‌های کنترل‌شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف ‌می‌کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان ‌می‌کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت ‌می‌نویسیم:
+در یک کامپوننت کنترل‌شده، هر تغییر state یک تابع handler مرتبط خواهد داشت. این باعث سر راست شدن تغییر یا اعتبارسنجی ورودی کاربر خواهد شد. به عنوان مثال، اگر ما می‌خواستیم نوشتن نام‌ها را با حروف بزرگ اجباری کنیم، می توانستیم `handleChange` را به این صورت بنویسیم:
 
 ```javascript{2}
 handleChange(event) {
@@ -78,7 +78,7 @@ handleChange(event) {
 
 ## تگ textarea {#the-textarea-tag}
 
-در HTML، متنی که در المنت `<textarea>` نمایش داده ‌می‌شود، بین تگ باز و بسته این المنت تعریف ‌می‌شود:
+در HTML، یک المنت `<textarea>` مقدارش را بر اساس فرزندانش [متن بین تگ باز و بسته این المنت] تعریف می‌کند:
 
 ```html
 <textarea>
@@ -123,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه ‌می‌شود، بنابراین المنت متن چند خطی، حاوی متن در رندر اولیه ‌می‌باشد.
+توجه کنید که `this.state.value` در تابع سازنده کلاس (constructor) مقدار دهی اولیه ‌می‌شود، بنابراین در ابتدا textarea با متنی درون آن نمایش داده می‌شود.
 
 ## تگ select {#the-select-tag}
 
-در HTML، تگ `<select>` یک لیست کشویی می‌سازد. برای مثال، کد HTML زیر یک لیست کشویی از طعم‌ها می‌سازد:
+در HTML، تگ `<select>` یک لیست کشویی می‌سازد. برای مثال، این HTML یک لیست کشویی از طعم‌ها را می‌سازد:
 
 ```html
 <select>
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
+توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک جا به‌روز رسانی کنید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -180,11 +180,11 @@ class FlavorForm extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن عملکرد کامپوننت کنترل‌شده را پیاده سازی کنید.
+در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن یک کامپوننت کنترل‌شده را پیاده سازی کنید.
 
 > نکته
 >
-> شما ‌می‌توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه ‌می‌دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
+> شما ‌می‌توانید یک آرایه را به خصوصیت value پاس دهید که به شما اجازه انتخاب چندین گزینه در یک تگ select را می‌دهد:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
@@ -192,17 +192,17 @@ class FlavorForm extends React.Component {
 
 ## تگ file input {#the-file-input-tag}
 
-در HTML، کد `<input type="file">` فیلد ورودی ‌می‌سازد که به کاربر اجازه ‌می‌دهد یک یا چند فایل را از محل ذخیره‌سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوا اسکریپت بر روی فایل‌های انتخابی عملیاتی انجام شود.
+در HTML، یک `<input type="file">`  به کاربر اجازه می‌دهد که یک یا چند فایل را از محل ذخیره‌سازی دستگاه خود انتخاب کند تا روی سرور بارگذاری شود یا توسط  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوااسکریپت روی آن کار شود.
 
 ```html
 <input type="file" />
 ```
 
-به دلیل اینکه مقدار این المنت فقط قابل‌خواندن ‌می‌باشد، این المنت در ری‌اکت یک کامپوننت **کنترل‌نشده** ‌می‌باشد. در مورد این کامپوننت و دیگر کامپوننت‌های کنترل‌نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
+به دلیل اینکه مقدار این المنت فقط قابل‌خواندن ‌می‌باشد، این المنت در ری‌اکت یک کامپوننت **کنترل‌نشده** ‌می‌باشد. در مورد این کامپوننت همراه با دیگر کامپوننت‌های کنترل‌نشده [در بخش دیگری از این اسناد](/docs/uncontrolled-components.html#the-file-input-tag) درباره آن بحث شده‌است.
 
-## به کار بردن چند فیلد ورودی {#handling-multiple-inputs}
+## کار با چندین ورودی {#handling-multiple-inputs}
 
-زمانی که نیاز دارید چند فیلد ورودی `input` کنترل‌شده به کار ببرید، ‌می‌توانید یک خصوصیت `name` برای هر یک از المنت‌ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد ‌می‌توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به‌روز شود.
+زمانی که نیاز دارید چند فیلد ورودی `input` کنترل‌شده به کار ببرید، ‌می‌توانید یک خصوصیت `name` برای هر یک از المنت‌ها تعریف کنید و اجازه دهید که تابع handler بر اساس مقدار event.target.name تصمیم بگیرد که چه کاری انجام دهد.
 
 برای مثال:
 
@@ -256,7 +256,7 @@ class Reservation extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
 
-توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) شیوه‌نگارش ES6 جهت به‌روز کردن مقدار ذخیره‌شده مرتبط با کلید هم‌نام با فیلد ورودی استفاده شده است:
+توجه داشته‌باشید که ما چگونه از قاعده نوشتن [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) در ES6 برای به‌روز رسانی state با کلید مرتبط با نام ورودی داده‌شده استفاده کرده‌ایم:
 
 ```js{2}
 this.setState({
@@ -264,18 +264,18 @@ this.setState({
 });
 ```
 
-معادل عملیات بالا ‌به‌صورت کد ES5 به این صورت ‌می‌باشد:
+معادل با این کد در ES5 است:
 
 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```
-همچنین از آن جایی که تابع `setState()` ‌به‌صورت خودکار ‌می‌تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت‌های به‌روز شده را زمان صدا زدن این تابع ارسال کنیم.
+همچنین از آن جایی که `setState()` ‌به‌صورت خودکار ‌می‌تواند [تغییرات جزیی state را به درون state فعلی ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), ما فقط نیاز داریم آن را با بخشی که تغییر کرده‌است فراخوانی کنیم.
 
-## فیلد ورودی کنترل‌شده با مقدار Null {#controlled-input-null-value}
+## مقدار Null ورودی کنترل‌شده {#controlled-input-null-value}
 
-تعریف value روی prop یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری کاربر از تغییر ورودی ‌می‌شود مگر این که خودتان بخواهید. اگر خصوصیت `value` را تعریف کرده‌اید اما ورودی هنوز قابل‌ ویرایش است، ممکن است مقدار `value` را ‌به‌صورت تصادفی به `undefined` و یا `null` قرار داده باشید.
+قراردادن prop value روی یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری می‌کند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار داده‌اید، اما هنوز قابل‌ ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقدار‌دهی کرده باشید.
 
 نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.)
 
@@ -290,8 +290,8 @@ setTimeout(function() {
 
 ## راه‌حل‌های جایگزین کامپوننت‌های کنترل‌شده {#alternatives-to-controlled-components}
 
-در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده ممکن است خسته‌کننده باشد، چون که شما باید به ازای هر (event) که به هر شکل داده‌ها را تغییر ‌می‌دهد، یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه‌دارنده وضعیت فیلد‌های ورودی در ری‌اکت ارسال کنید. پیاده سازی این رفتار به مرور ‌می‌تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری‌اکت تبدیل کنید و یا برنامه توسعه یافته با ری‌اکت را با یک برنامه غیر ری‌اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد‌های ورودی فرم ‌می‌باشد.
+در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده میتواند خسته‌کننده باشد، چون شما می‌بایست برای هر شکلی که داده‌ها تغییر می‌کنند یک event handler بنویسید و تمام وضعیت ورودی را به یک کامپوننت ری‌اکتی انتقال دهید. این می‌تواند مخصوصا زمانی که قصد دارید کد موجودتان را به ری‌اکت تبدیل کنید، یا برنامه ری‌اکتی را با یک کتابخانه غیرری‌اکتی ادغام کنید آزار دهنده شود. در چنین شرایطی شاید بهتر باشد به [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) نگاهی بیاندازید که یک تکنیک جایگزین برای پیاده سازی فرم های ورودی ‌می‌باشد.
 
 ## راه‌حل‌های تمام‌عیار {#fully-fledged-solutions}
 
-اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.
+اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال، این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت state ساخته شده است، پس از یادگیری آن غفلت نکنید.

From 0242b716003f6cbc144e74833f0b7f54795345c4 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Mon, 11 Mar 2019 09:46:35 +0330
Subject: [PATCH 13/13] updated translation

---
 content/docs/forms.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index f15e50c18..8edb3c898 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت [ورودی] را در خود ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
+المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که المنت‌های فرم به صورت طبیعی مقداری state درونی ‌نگه‌داری ‌می‌کنند. برای مثال، این فرم که ‌به‌صورت HTML ساده نوشته شده است تنها یک نام دریافت ‌می‌کند:
 
 ```html
 <form>
@@ -294,4 +294,4 @@ setTimeout(function() {
 
 ## راه‌حل‌های تمام‌عیار {#fully-fledged-solutions}
 
-اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال، این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت state ساخته شده است، پس از یادگیری آن غفلت نکنید.
+اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های مشاهده‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال، این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت state ساخته شده است، پس از یادگیری آن غفلت نکنید.