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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Traduction de la page "Forms" #19

Merged
merged 4 commits into from
Feb 14, 2019
Merged

Traduction de la page "Forms" #19

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0711118
Translate docs/forms page
tlenclos Feb 12, 2019
8b2ad88
Apply suggestions from code review
tdd Feb 13, 2019
b82d50e
Fix fruits value attribute
tlenclos Feb 13, 2019
20dbfd5
Update forms.md
tdd Feb 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 61 additions & 61 deletions content/docs/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: forms
title: Forms
title: Formulaires
permalink: docs/forms.html
prev: lists-and-keys.html
next: lifting-state-up.html
Expand All @@ -9,27 +9,27 @@ redirect_from:
- "docs/forms-zh-CN.html"
---

HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
Les formulaires HTML fonctionnent un peu différemment des autres éléments du DOM en React car ils possèdent naturellement un état interne. Par exemple, ce formulaire en HTML qui accepte juste un nom :

```html
<form>
<label>
Name:
Nom :
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Envoyer" />
</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".
Ce formulaire a le comportement classique d'un formulaire HTML et redirige sur une nouvelle page quand l'utilisateur le soumet. Si vous souhaitez ce comportement en React, vous n’avez rien à faire. Cependant, dans la plupart des cas, vous voudrez pouvoir gérer la soumission avec une fonction JavaScript, qui accède aux données saisies par l'utilisateur. La manière classique de faire ça consiste à utiliser les « composants contrôlés ».

## Controlled Components {#controlled-components}
## Composants contrôlés {#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).
En HTML, les éléments de formulaire tels que `<input>`, `<textarea>`, et `<select>` maintiennent généralement leur propre état et se mettent à jour par rapport aux saisies de l’utilisateur. En React, l'état modifiable est généralement stocké dans la propriété `state` des composants et mis à jour uniquement avec [`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".
On peut combiner ces deux concepts en utilisant l'état local React comme « source unique de vérité ». Ainsi le composant React qui affiche le formulaire contrôle aussi son comportement par rapport aux saisies de l’utilisateur. Un champ de formulaire dont l'état est contrôlé de cette façon par React est appelé un « composant contrôlé ».

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:
Par exemple, en reprenant le code ci-dessus pour afficher le nom lors de la soumission, on peut écrire le formulaire sous forme de composant contrôlé :

```javascript{4,10-12,24}
class NameForm extends React.Component {
Expand All @@ -46,54 +46,54 @@ class NameForm extends React.Component {
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
alert('Le nom a été soumis : ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
Nom :
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Envoyer" />
</form>
);
}
}
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
[**Essayer sur 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.
À présent que l'attribut `value` est défini sur notre élément de formulaire, la valeur affichée sera toujours `this.state.value`, faisant ainsi de l'état local React la source de vérité. Puisque `handleChange` est déclenché à chaque frappe pour mettre à jour l'état local React, la valeur affichée restera mise à jour au fil de la saisie.

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:
Dans un composant contrôlé, chaque changement de l'état aura une fonction gestionnaire associée. Ça permet de modifier ou valider facilement, à la volée, les saisies de l’utilisateur. Par exemple, si nous voulions forcer les noms en majuscules, on pourrait écrire `handleChange` de la manière suivante :

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

## The textarea Tag {#the-textarea-tag}
## La balise `textarea` {#the-textarea-tag}

In HTML, a `<textarea>` element defines its text by its children:
En HTML, une balise `<textarea>` définit son texte via ses enfants :

```html
<textarea>
Hello there, this is some text in a text area
Bonjour, voici du texte dans une zone de texte
</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:
En React, un `<textarea>` utilise à la place l'attribut `value`. Du coup, un formulaire utilisant un `<textarea>` peut être écrit d'une manière très similaire à un formulaire avec un élément `<input>` mono-ligne.

```javascript{4-6,12-14,26}
class EssayForm extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Please write an essay about your favorite DOM element.'
value: 'Écrivez un essai à propos de votre élément du DOM préféré'
};
this.handleChange = this.handleChange.bind(this);
Expand All @@ -105,7 +105,7 @@ class EssayForm extends React.Component {
}
handleSubmit(event) {
alert('An essay was submitted: ' + this.state.value);
alert('Un essai a été envoyé : ' + this.state.value);
event.preventDefault();
}
Expand All @@ -116,29 +116,29 @@ class EssayForm extends React.Component {
Essay:
<textarea value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Envoyer" />
</form>
);
}
}
```

Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
Remarquez que `this.state.value` est initialisé dans le constructeur, permettant que le textarea démarre avec du texte à l'intérieur.

## The select Tag {#the-select-tag}
## La balise `select` {#the-select-tag}

In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
En HTML, `<select>` crée une liste déroulante. Par exemple, ce HTML crée une liste déroulante de parfums.

```html
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
<option value="grapefruit">Pamplemousse</option>
<option value="lime">Citron vert</option>
<option selected value="coconut">Noix de coco</option>
<option value="mango">Mangue</option>
</select>
```

Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
Notez que l'option Noix de coco est sélectionnée au départ, grâce à l'attribut `selected`. React, au lieu d'utiliser l'attribut `selected`, utilise un attribut `value` sur la balise racine `select`. C’est plus pratique dans un composant contrôlé car vous n’avez qu’un seul endroit à mettre à jour. Par exemple :

```javascript{4,10-12,24}
class FlavorForm extends React.Component {
Expand All @@ -155,56 +155,56 @@ class FlavorForm extends React.Component {
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
alert('Votre parfum favori est : ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
Choisissez votre parfum favori :
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
<option value="grapefruit">Pamplemousse</option>
<option value="lime">Citron vert</option>
<option selected value="coconut">Noix de coco</option>
<option value="mango">Mangue</option>
</select>
</label>
<input type="submit" value="Submit" />
<input type="submit" value="Envoyer" />
</form>
);
}
}
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
[**Essayer sur 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.
Au final, ça permet aux balises `<input type="text">`, `<textarea>`, et `<select>` de fonctionner de manière très similaire—elles acceptent toutes un attribut `value` que vous pouvez utiliser pour implémenter un composant contrôlé.

> Note
>
> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
> Vous pouvez passer un tableau pour l'attribut `value`, permettant de sélectionner plusieurs valeurs dans un élément `select` :
>
>```js
><select multiple={true} value={['B', 'C']}>
tdd marked this conversation as resolved.
Show resolved Hide resolved
>```
## The file input Tag {#the-file-input-tag}
## La balise `input type="file"` {#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).
En HTML, un `<input type="file">` permet à l’utilisateur de sélectionner un ou plusieurs fichiers depuis son appareil et de les téléverser vers un serveur ou de les manipuler en JavaScript grâce à [l'API File](https://developer.mozilla.org/fr/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).
Sa valeur étant en lecture seule, c'est un composant **non-contrôlé** en React. Ce cas de figure et le sujet des composants non-contrôlés en général sera détaillé [plus tard dans la documentation](/docs/uncontrolled-components.html#the-file-input-tag).

## Handling Multiple Inputs {#handling-multiple-inputs}
## Gérer plusieurs saisies {#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`.
Quand vous souhaitez gérer plusieurs champs contrôlés, vous pouvez ajouter un attribut `name` à chaque champ et laisser la fonction gestionnaire choisir quoi faire en fonction de la valeur de `event.target.name`.

For example:
Par exemple :

```javascript{15,18,28,37}
class Reservation extends React.Component {
Expand All @@ -220,7 +220,7 @@ class Reservation extends React.Component {
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
Expand All @@ -232,7 +232,7 @@ class Reservation extends React.Component {
return (
<form>
<label>
Is going:
Participe :
<input
name="isGoing"
type="checkbox"
Expand All @@ -241,7 +241,7 @@ class Reservation extends React.Component {
</label>
<br />
<label>
Number of guests:
Nombre d'invités :
<input
name="numberOfGuests"
type="number"
Expand All @@ -254,45 +254,45 @@ class Reservation extends React.Component {
}
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
[**Essayer sur 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:
Notez l'utilisation de la syntaxe des [propriétés calculés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri%C3%A9t%C3%A9s_calcul%C3%A9s) pour mettre à jour la valeur de l'état correspondant au nom du champ.

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

It is equivalent to this ES5 code:
C’est équivalent à ce code ES5 :

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

Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
Qui plus est, comme `setState()` fusionne automatiquement un état partiel dans l'état local courant, il nous a suffi de l'appeler avec les parties modifiées.

## Controlled Input Null Value {#controlled-input-null-value}
## Valeur nulle des champs contrôlés {#controlled-input-null-value}

Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
Définir la prop `value` sur un [composant contrôlé](/docs/forms.html#controlled-components) empêche l'utilisateur de changer la saisie sauf si le permettez. Si vous spécifiez une `value` mais que le champ reste modifiable, alors `value` doit s’être accidentellement retrouvée à `undefined` ou `null`.

The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
Le code suivant illustre ce cas de figure. (Le champ est verrouillé au démarrage mais devient modifiable après un court délai.)

```javascript
ReactDOM.render(<input value="hi" />, mountNode);
ReactDOM.render(<input value="Salut" />, mountNode);

setTimeout(function() {
ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

```

## Alternatives to Controlled Components {#alternatives-to-controlled-components}
## Alternatives aux composants contrôlés {#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.
Il est parfois fastidieux d'utiliser les composants contrôlés, car il vous faut écrire un gestionnaire d'événement pour chaque possibilité de changement des données, et gérer toute modification des saisies via un composant React. Ça peut devenir particulièrement irritant lors de la conversion d'un projet en React, ou l'intégration d'une application React avec une bibliothèque non-React. Dans ces situations, il est intéressant de connaître les [composants non-contrôlés](/docs/uncontrolled-components.html), une technique alternative pour implémenter les formulaires de saisie.

## Fully-Fledged Solutions {#fully-fledged-solutions}
## Solutions clé en main {#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.
Si vous cherchez une solution complète gérant la validation, l’historique des champs visités, et la gestion de soumission de formulaire, [Formik](https://jaredpalmer.com/formik) fait partie des choix populaires. Ceci dit, il repose sur les mêmes principes de composants contrôlés et de gestion d'état local—alors ne faites pas l’impasse dessus.