diff --git a/content/docs/nav.yml b/content/docs/nav.yml index a54396916..c200c9f2f 100644 --- a/content/docs/nav.yml +++ b/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 diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index 10b6eab28..cd57d2453 100644 --- a/content/docs/uncontrolled-components.md +++ b/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,7 +19,7 @@ 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(); } @@ -27,58 +27,59 @@ class NameForm extends React.Component { return (
- +
); } } ``` -[**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 (
- +
); } ``` -Likewise, `` and `` support `defaultChecked`, and `