Skip to content

Commit f9d6ccd

Browse files
Itay YehezkelItay Yehezkel
authored andcommitted
add uncontrolled components
1 parent 7552a57 commit f9d6ccd

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

content/docs/uncontrolled-components.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
id: uncontrolled-components
3-
title: Uncontrolled Components
3+
title: קומפוננטות לא מבוקרות
44
permalink: docs/uncontrolled-components.html
55
---
66

7-
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.
7+
ברוב המקרים, אנו ממליצים להשתמש [בקומפוננטות מבוקרות](/docs/forms.html) למימוש טפסים. בקומפוננטה מבוקרת, נתוני הטופס מנוהלים על ידי קומפוננטת React. האלטרנטיבה היא קומפוננטה לא מבוקרת, איפה שנתוני הטופס מנוהלים על ידי ה-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+
כדי לכתוב קומפוננטה לא מבוקרת, במקום לרשום event handler לכל עדכון state, אתה יכול [להשתמש ב-ref](/docs/refs-and-the-dom.html) כדי לקבל את ערכי הטופס מה-DOM.
1010

11-
For example, this code accepts a single name in an uncontrolled component:
11+
לדוגמא, הקוד הזה מקבל שם יחיד בקומפוננטה לא מבוקרת:
1212

1313
```javascript{5,9,18}
1414
class NameForm extends React.Component {
@@ -37,15 +37,15 @@ class NameForm extends React.Component {
3737
}
3838
```
3939

40-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
40+
[**נסו זאת ב-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+
מכיוון קומפוננטה לא מבוקרת שומרת את מקור האמת ב-DOM, לפעמיים זה קל יותר לשלב React ולא React קוד מתי שמשתמשים בקומפוננטה לא מבוקרת. זה גם יכול להיות מעט קוד אם אתה רוצה להיות מהיר ומלוכלך, אחרת, אתה צריך קומפוננטה מבוקרת.
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+
אם זה עדיין לא ברור איזה סוג של קומפוננטה אתה צריך להשתמש בסיטואציה מסויימת, אתה עשוי למצוא את [המאמר הזה על קלט מבוקר נגד לא מבוקר](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) מאוד עוזר.
4545

46-
### Default Values {#default-values}
46+
### ערכי ברירת מחדל {#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+
ברנדור מחזור החיים של React, התכונה `value` באלמנטי טופס ידרסו את הערך ב-DOM. עם קומפוננטה לא מבוקרת, לעיתים קרובות תרצה ש-React יספק את הערך הראשוני, אבל ישאיר את העדכונים הבאים לא מבוקרים. כדי לטפל במקרה כזה, אתה יכול לציין את תכונת `defaultValue` במקום `value`
4949

5050
```javascript{7}
5151
render() {
@@ -64,19 +64,19 @@ render() {
6464
}
6565
```
6666

67-
Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
67+
כך גם, `<input type="checkbox">` ו-`<input type="radio">` תומכים ב-`defaultChecked`, ו-`<select>` ו-`<textarea>` תומכים ב-`defaultValue`.
6868

69-
## The file input Tag {#the-file-input-tag}
69+
## התג file input {#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+
ב-HTML , `<input type="file">` נותן למשתמשים לבחור קובץ אחד או יותר מהמכשיר שלהם לעלות לשרת או לתפעול על ידי JavaScript דרך [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+
ב-React, `<input type="file" />` הוא תמיד קומפוננטה לא מבוקרת בגלל שהערך שלו ניתן על ידי המשתמש, ולא באופן תכנותי.
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+
אתה צריך להשתמש ב-File API כדי לתקשר עם קבצים. הדוגמא הבאה מראה איך ליצור [ref ל-DOM node](/docs/refs-and-the-dom.html) כדי לגשת לקובץ(ים) ב-submit handler:
8080

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

0 commit comments

Comments
 (0)