Skip to content
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.

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

Update forms.md Issue #17 #95

Open
wants to merge 2 commits into
base: master
from

Conversation

Projects
None yet
3 participants
@ael-mas
Copy link

commented Mar 6, 2019

No description provided.

@netlify

This comment has been minimized.

Copy link

commented Mar 6, 2019

Deploy preview for ro-reactjs ready!

Built with commit a07092b

https://deploy-preview-95--ro-reactjs.netlify.com

@tesseralis tesseralis requested a review from RaulTsc Mar 10, 2019

@gabrielmoncea
Copy link

left a comment

Missing some diacritical marks and usage of too much RO - EN code switch. I will review the precision of the translations after these small changes are completed

@@ -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:
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:

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

"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ță"

@@ -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".
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".

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

"depune" works better than "submit". Replace "form" with "formular". Diacriticals missing in second sentence. "Totuși"


## 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).

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

I also, believe in this case, state should be underlined or something to make it pop


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ă".

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

Missing diacriticals. Use "formular"


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ă:

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

"dorim ca în...", "autentificăm" instead of "logăm", "formularul" instead of "formul"

@@ -256,29 +256,29 @@ class Reservation extends React.Component {

[**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:

This comment has been minimized.

Copy link
@gabrielmoncea

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`.

This comment has been minimized.

Copy link
@gabrielmoncea

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`.

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

"fără să vă dați"


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.

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

"implementați", "situație". Additional whitespace in "un cod de bază". "formular" instead of "form"


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.

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Mar 10, 2019

"incluzând", "păstrarea", "administrarea depunerii formularului" instead of "manipularea formului submis", "În orice caz", "stării gestionate"

@tesseralis

This comment has been minimized.

Copy link
Member

commented Mar 16, 2019

@ael-mas could you respond to the comments @gabrielmoncea gave?

@ael-mas

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

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.

@gabrielmoncea

This comment has been minimized.

Copy link

commented Mar 20, 2019

@ael-mas try to also follow this review that myself got on the other PR :)

@ael-mas

This comment has been minimized.

Copy link
Author

commented Mar 24, 2019

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?

@ael-mas

This comment has been minimized.

Copy link
Author

commented Mar 27, 2019

@gabrielmoncea let me know if there's anything else I should change

@tesseralis

This comment has been minimized.

Copy link
Member

commented Mar 28, 2019

@ael-mas you should just be able to do git push to update those changes. @gabrielmoncea could you re-review?

@gabrielmoncea

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

@@ -66,9 +66,9 @@ class NameForm extends React.Component {

[**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.

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas whitespace not deleted


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:

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas changes to this snippet were not applied

@@ -78,22 +78,22 @@ handleChange(event) {

## 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::

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied


```html
<textarea>
Hello there, this is some text in a text area
Buna, aceasta este o zona pentru introducerea textului.

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied

</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:
Î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:

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied


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

It is equivalent to this ES5 code:
Este echivalent cu codul ES5 urmator:

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied


## Controlled Input Null Value {#controlled-input-null-value}
## Controlled Input Null Value {#controlled-input-null-value} / Valoarea de Intrare Controlată Nulă

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied

@@ -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.
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}

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied

@@ -78,22 +78,22 @@ handleChange(event) {

## The textarea Tag {#the-textarea-tag}

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied

@@ -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".
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}

This comment has been minimized.

Copy link
@gabrielmoncea

gabrielmoncea Apr 12, 2019

@ael-mas required changes not applied

@gabrielmoncea

This comment has been minimized.

Copy link

commented Apr 12, 2019

@ael-mas @tesseralis I'm sorry but the changes from my review were not applied completely

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.