This repository was archived by the owner on Apr 21, 2023. It is now read-only.
Update forms.md Issue #17 #95
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for ro-reactjs ready! Built with commit 09e06c0 |
gabimoncha
suggested changes
Mar 10, 2019
content/docs/forms.md
Outdated
| --- | ||
|
|
||
| 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: | ||
| Deoarece elementele din form păstrează în mod natural o stare internă, elementele din form-ul HTML funcționează puțin diferit fata de celelalte elemente DOM din React. De exemplu, acest formular în HTML acceptă un singur nume: |
There was a problem hiding this comment.
"elementele de formular" I believe it works in better in the first case. In the second you should replace "form" with "formular".
Also, you are missing some diacriticals "diferit față"
content/docs/forms.md
Outdated
| ``` | ||
|
|
||
| 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". | ||
| Când utilizatorul submite acest form va avea comportamentul implicit al unui form HTML de navigare către o pagină nouă. Dacă doriți acest comportament în React, cu siguranta va functiona. Totusi în majoritatea cazurilor, este convenabil să existe o funcție in JavaScript care sa gestioneaze submiterea formului și accesul la datele introduse de utilizator în form. Modul standard pentru a realiza acest lucru este cu o tehnică numită "componente controlate". |
There was a problem hiding this comment.
"depune" works better than "submit". Replace "form" with "formular". Diacriticals missing in second sentence. "Totuși"
content/docs/forms.md
Outdated
| ## 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). | ||
| În HTML, elementele specifice formului, cum ar fi `<input>`, `<textarea>`, și `<select>` îsi păstrează în mod obișnuit starea și o actualizează în funcție de datele introduse de utilizator. În React, starea mutabilă este de obicei păstrată în proprietatea state a componentelor și este actualizată doar cu [`setState()`](/docs/react-component.html#setstate). |
There was a problem hiding this comment.
I also, believe in this case, state should be underlined or something to make it pop
content/docs/forms.md
Outdated
| În HTML, elementele specifice formului, cum ar fi `<input>`, `<textarea>`, și `<select>` îsi păstrează în mod obișnuit starea și o actualizează în funcție de datele introduse de utilizator. În React, starea mutabilă este de obicei păstrată în proprietatea state a componentelor și este actualizată doar cu [`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". | ||
| Putem combina cele două, făcând ca starea React să fie "singura sursă de adevăr". In felul acesta componenta React care redă un form va controla și ceea ce se întâmplă în acel form pe baza datelor introduse ulterior de utilizator. Astfel un element de intrare al formului a cărui valoare este controlată de React se numește "componentă controlată". |
There was a problem hiding this comment.
Missing diacriticals. Use "formular"
content/docs/forms.md
Outdated
| Putem combina cele două, făcând ca starea React să fie "singura sursă de adevăr". In felul acesta componenta React care redă un form va controla și ceea ce se întâmplă în acel form pe baza datelor introduse ulterior de utilizator. Astfel un element de intrare al formului a cărui valoare este controlată de React se numește "componentă controlată". | ||
|
|
||
| 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: | ||
| De exemplu, dacă dorim ca in exemplul anterior să logăm numele la momentul trimiterii, putem implementa formul ca o componentă controlată: |
There was a problem hiding this comment.
"dorim ca în...", "autentificăm" instead of "logăm", "formularul" instead of "formul"
content/docs/forms.md
Outdated
| [**Try it on 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: | ||
| Rețineți modul în care am folosit sintaxa ES6 pentru [proprietatea procesata nume](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) pentru a actualiza starea cheii corespunzătoare datei de intrare furnizate: |
content/docs/forms.md
Outdated
| ## Handling Multiple Inputs {#handling-multiple-inputs} / Manipulare de intrări multiple | ||
|
|
||
| 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`. | ||
| Atunci când aveți nevoie să gestionați mai multe elemente de intrare controlate (`input`), puteți adăuga un atribut `name` pentru fiecare element si lasati funcția de manipulare să aleagă ce trebuie să facă în funcție de valoarea lui `event.target.name`. |
content/docs/forms.md
Outdated
| ## Controlled Input Null Value {#controlled-input-null-value} / Valoarea de Intrare Controlată Nulă | ||
|
|
||
| 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`. | ||
| Specificînd proprietatea value pentru o [componentă controlată](/docs/forms.html#controlled-components), va împiedica utilizatorul să schimbe intrarea, doar dacă doriți acest lucru. Dacă ați specificat o `value`, dar intrarea este încă editabilă, este posibil să fi setat `value` fara sa va dati seama `undefined` sau `null`. |
content/docs/forms.md
Outdated
| ## Alternatives to Controlled Components {#alternatives-to-controlled-components} / Alternative pentru componentele controlate | ||
|
|
||
| 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. | ||
| Uneori este dificil să folosiți componente controlate, deoarece trebuie să implementati un handler(manipulant) pentru evenimente pentru fiecare situatie în care datele dvs. se pot schimba și să conducă toate starile de intrare printr-o componentă React. Acest lucru poate deveni deosebit de enervant când convertiți un cod de bază preexistentă în React sau integrați o aplicație React cu o bibliotecă non-React. În aceste situații, vă recomandăm să verificați [componentele necontrolate](/docs/uncontrolled-components.html), o tehnică alternativă pentru implementarea formul de intrare. |
There was a problem hiding this comment.
"implementați", "situație". Additional whitespace in "un cod de bază". "formular" instead of "form"
content/docs/forms.md
Outdated
| ## Fully-Fledged Solutions {#fully-fledged-solutions} / Soluții complete | ||
|
|
||
| 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. | ||
| Dacă doriti o soluție completă inclusînd validarea, pastrarea câmpurilor vizitate și manipularea formului submis, atunci [Formik](https://jaredpalmer.com/formik) este una dintre alegerile populare. In orice caz, este construită pe aceleași principii ale componentelor controlate și ale starii gestionate - deci nu neglijați să le învățați. |
There was a problem hiding this comment.
"incluzând", "păstrarea", "administrarea depunerii formularului" instead of "manipularea formului submis", "În orice caz", "stării gestionate"
|
@ael-mas could you respond to the comments @gabrielmoncea gave? |
|
Hey, sorry I haven't been responding. I will fix everything @gabrielmoncea mentioned as soon as possible, I've just been a little busy with school. |
|
@ael-mas try to also follow this review that myself got on the other PR :) |
|
I've made the changes in my forked repository. Is there a way to update my pull request with the changed forms.md file or do I have to submit another pull request? |
|
@gabrielmoncea let me know if there's anything else I should change |
|
@ael-mas you should just be able to do |
|
@ael-mas @tesseralis I will review the new changes as soon as I am free. It should happen sometime this week or over the weekend |
gabimoncha
suggested changes
Apr 12, 2019
content/docs/forms.md
Outdated
| [**Try it on 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. | ||
| Deoarece atributul `value` este setat in elementul form, valoarea afișată va fi întotdeauna `this.state.value`, făcând starea React sursa de adevăr. Valoarea afișată va fi actualizată pe masura ce utilizatorul introduce datele deoarece `handleChange` se executa cu fiecare apăsare de tastă pentru a actualiza starea React. |
content/docs/forms.md
Outdated
| Deoarece atributul `value` este setat in elementul form, valoarea afișată va fi întotdeauna `this.state.value`, făcând starea React sursa de adevăr. Valoarea afișată va fi actualizată pe masura ce utilizatorul introduce datele deoarece `handleChange` se executa cu fiecare apăsare de tastă pentru a actualiza starea React. | ||
|
|
||
| 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: | ||
| Pentru o componentă controlată, fiecare stare mutată va avea asociată o funcție de manipulare. Acest lucru face ca modificarea sau validarea intrărilor utilizatorului se fie directa. De exemplu, dacă vrem să fortam că numele sa fie scrise cu toate literele majuscule, putem implementa `handleChange` astfel: |
There was a problem hiding this comment.
@ael-mas changes to this snippet were not applied
content/docs/forms.md
Outdated
| ## The textarea Tag {#the-textarea-tag} | ||
|
|
||
| In HTML, a `<textarea>` element defines its text by its children: | ||
| În HTML, un element `<textarea>` definește textul prin copii(children) săi:: |
There was a problem hiding this comment.
@ael-mas required changes not applied
content/docs/forms.md
Outdated
| ```html | ||
| <textarea> | ||
| Hello there, this is some text in a text area | ||
| Buna, aceasta este o zona pentru introducerea textului. |
There was a problem hiding this comment.
@ael-mas required changes not applied
content/docs/forms.md
Outdated
| ``` | ||
|
|
||
| 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: | ||
| În React, un `<textarea>` foloseste în schimb un atribut `value`. În felul acesta, un form ce utilizează `<textarea>` poate fi implementat foarte asemănător cu un form care utilizează o intrare cu o singură linie: |
There was a problem hiding this comment.
@ael-mas required changes not applied
content/docs/forms.md
Outdated
| ``` | ||
|
|
||
| It is equivalent to this ES5 code: | ||
| Este echivalent cu codul ES5 urmator: |
There was a problem hiding this comment.
@ael-mas required changes not applied
content/docs/forms.md
Outdated
| De asemenea, deoarece `setState()` [imbina automat o stare parțială cu o starea curenta](/docs/state-and-lifecycle.html#state-updates-are-merged), trebuie doar să o chemăm cu parțiile schimbate. | ||
|
|
||
| ## Controlled Input Null Value {#controlled-input-null-value} | ||
| ## Controlled Input Null Value {#controlled-input-null-value} / Valoarea de Intrare Controlată Nulă |
There was a problem hiding this comment.
@ael-mas required changes not applied
content/docs/forms.md
Outdated
| Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it. | ||
| Observați `this.state.value` este inițializat în constructor, astfel încât zona text să fie presentata cu acelasi text. | ||
|
|
||
| ## The select Tag {#the-select-tag} |
There was a problem hiding this comment.
@ael-mas required changes not applied
content/docs/forms.md
Outdated
| } | ||
| ``` | ||
|
|
||
| ## The textarea Tag {#the-textarea-tag} |
There was a problem hiding this comment.
@ael-mas required changes not applied
content/docs/forms.md
Outdated
| 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". | ||
| Când utilizatorul submite acest form va avea comportamentul implicit al unui form HTML de navigare către o pagină nouă. Dacă doriți acest comportament în React, cu siguranta va functiona. Totusi în majoritatea cazurilor, este convenabil să existe o funcție in JavaScript care sa gestioneaze submiterea formului și accesul la datele introduse de utilizator în form. Modul standard pentru a realiza acest lucru este cu o tehnică numită "componente controlate". | ||
|
|
||
| ## Controlled Components {#controlled-components} |
There was a problem hiding this comment.
@ael-mas required changes not applied
|
@ael-mas @tesseralis I'm sorry but the changes from my review were not applied completely |
|
@ael-mas @gabrielmoncea FYI am rezolvat conflictele dar s-a intamplat ceva dubios cu change-urile. O sa fac checkout local si o sa updatez PR-ul cu comment-urile din nou. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.