Traduction de la page "Uncontrolled Components"

content/docs/nav.yml

@@ -76,7 +76,7 @@
     - id: typechecking-with-proptypes
       title: Typechecking With PropTypes
     - id: uncontrolled-components
-      title: Uncontrolled Components
+      title: Composants non-contrôlés
     - id: web-components
       title: Web Components
 - title: Référence de l'API

content/docs/uncontrolled-components.md

@@ -1,14 +1,14 @@
 ---
 id: uncontrolled-components
-title: Uncontrolled Components
+title: Composants non-contrôlés
 permalink: docs/uncontrolled-components.html
 ---
 
-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.
+Dans la plupart des cas, pour implémenter des formulaires, nous recommandons d'utiliser des [composants contrôlés](/docs/forms.html). Dans un composant contrôlé, les données du formulaires sont gérées par le composant React. L'alternative est le composant non-contrôlé, où les données sont gérées par le DOM.
 
-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.
+Au lieu d'écrire un gestionnaire d'événements pour chaque mise à jour de l'état d'un composant non-contrôlé, vous pouvez [utiliser une ref](/docs/refs-and-the-dom.html).
 
-For example, this code accepts a single name in an uncontrolled component:
+Par exemple, ce code accepte une saisie de nom dans un composant non-contrôlé :
 
 ```javascript{5,9,18}
 class NameForm extends React.Component {
@@ -19,66 +19,67 @@ class NameForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.input.current.value);
+    alert('Un nom a été envoyé : ' + this.input.current.value);
     event.preventDefault();
   }
 
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Name:
+          Nom :
           <input type="text" ref={this.input} />
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="Envoyer" />
       </form>
     );
   }
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
 
-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.
+Puisqu'un composant non-contrôlé garde la source de vérité dans le DOM, il est parfois plus simple d'intégrer du code React à base de composants non-contrôlés avec du code non-React. Le code peut également être légèrement plus concis si vous souhaitez pondre un truc vite fait. Autrement, vous devriez utiliser les composants contrôlés.
 
-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.
+Si dans une situation donnée il n'est pas toujours évident de savoir quel type de composant utiliser, [cet article sur les champs contrôlés ou non-contrôlés](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) vous sera peut-être utile.
 
-### Default Values {#default-values}
+### Valeurs par défaut {#default-values}
 
-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`.
+Dans le cycle de vie des rendus React, l'attribut `value` des éléments du formulaire va écraser la valeur du DOM. Avec un composant non-contrôlé, vous souhaiterez plus souvent spécifier la valeur initiale et laisser les mises à jours suivantes non-contrôlées. Dans ces cas-là, vous pouvez spécifier un attribut `defaultValue` plutôt que `value`.
 
 ```javascript{7}
 render() {
   return (
     <form onSubmit={this.handleSubmit}>
       <label>
-        Name:
+        Nom :
         <input
-          defaultValue="Bob"
+          defaultValue="Thierry"
           type="text"
           ref={this.input} />
       </label>
-      <input type="submit" value="Submit" />
+      <input type="submit" value="Envoyer" />
     </form>
   );
 }
 ```
 
-Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
+Dans la même série, `<input type="checkbox">` et `<input type="radio">` ont un attribut `defaultChecked`, et `<select>` et `<textarea>` ont aussi `defaultValue`.
 
-## 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" />
 ```
 
-In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
+`<input type="file" />` est toujours un composant non-contrôlé en React, puisque sa valeur ne peut être définie que par l’utilisateur et non programmatiquement.
+
+Vous devriez utiliser l'API *File* pour interagir avec les fichiers. L'exemple suivant montre comment créer une [ref sur le nœud DOM](/docs/refs-and-the-dom.html) pour accéder aux fichiers lors de l'envoi du formulaire :
 
-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:
 
 `embed:uncontrolled-components/input-type-file.js`
 
-[](codepen://uncontrolled-components/input-type-file)
+**[Essayer sur CodePen](codepen://uncontrolled-components/input-type-file)**
 

examples/uncontrolled-components/input-type-file.js

@@ -9,7 +9,7 @@ class FileInput extends React.Component {
     // highlight-range{4}
     event.preventDefault();
     alert(
-      `Selected file - ${
+      `Fichier sélectionné - ${
         this.fileInput.current.files[0].name
       }`
     );
@@ -20,11 +20,11 @@ class FileInput extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Upload file:
+          Envoyer un fichier :
           <input type="file" ref={this.fileInput} />
         </label>
         <br />
-        <button type="submit">Submit</button>
+        <button type="submit">Envoyer</button>
       </form>
     );
   }