Définir la propriété Checkbox dans React

1. Checkbox dans React
2. Définir une propriété check de la case à cocher dans React

Les formulaires définis dans JSX sont plus que de simples éléments HTML. Les formulaires sont censés stocker et transférer des données internes, ils ont donc besoin d’un état interne pour les gérer.

Prenons l’exemple des cases à cocher HTML. Dans leur état naturel, les cases à cocher HTML peuvent stocker la valeur de l’attribut checked. Cependant, si vous développez une application, le stockage des données dans l’état interne de l’élément est insuffisant. Vous devez stocker la valeur de l’attribut checked dans l’état interne de votre application React afin de pouvoir la référencer dans toute l’application.

Checkbox dans React

Les éléments de case à cocher dans React doivent suivre certaines règles. Il y a 10 ans, il était peut-être acceptable de créer de nouveaux attributs pour les éléments HTML de manière conditionnelle. Cela va à l’encontre des recommandations de bonnes pratiques dans React. Tout élément de case à cocher doit être créé avec ou sans l’attribut checked.

Les éléments de case à cocher initiés sans l’attribut checked ne sont pas contrôlés :

<input type="checkbox" name="uncontrolled"></input>

Les éléments de case à cocher définis avec l’attribut checked sont contrôlés :

<input type="checkbox" checked={true} name="controlled"></input>

Un élément <input> doit être initié en tant que composant contrôlé ou non contrôlé. Une erreur courante consiste à définir l’attribut checked sur une valeur null ou undefined. Un codeur JavaScript peut s’attendre à ce que ces valeurs soient automatiquement converties en une valeur booléenne false, mais React fonctionne différemment.

Erreur déroutante

Lorsque React rencontre un attribut avec une valeur null ou undefined, il ignorera l’attribut et ne le rendra pas. Plus tard, si la valeur initiale devient true, un attribut checked réapparaîtra, ce qui déclenchera le passage d’un composant non contrôlé à un composant contrôlé.

React générera une erreur, vous indiquant que les composants doivent être initialisés comme contrôlés ou non contrôlés. Si le composant case à cocher a été défini sans attribut checked, vous ne pourrez pas en ajouter un par la suite.

Beaucoup de gens ne savent pas que définir l’attribut checked sur une case à cocher l’initialise en tant que composant contrôlé. C’est pourquoi ils sont confus par le message d’erreur, qui se lit comme suit :

Warning: AwesomeComponent is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Définir une propriété check de la case à cocher dans React

Une fois que vous avez compris le problème, le résoudre est très facile. Si vous avez l’intention de créer un composant checkbox contrôlé, vous devez vous assurer que l’attribut checked est évalué à true ou à false. Ceci est possible en définissant la propriété defaultProps et en définissant l’attribut checked sur false par défaut. Voici un exemple de code :

class App extends Component {
  constructor(props) {
    super(props) this.state = {}
  }
  render() {
    console.log('App started');
    this.defaultProps = {
      checked: false
    } return <input type = 'checkbox' checked = {this.checked} name =
                            'controlled'>< /input>
  }
}

Un autre avantage de l’utilisation des defaultProps est qu’elles ne représentent que la valeur par défaut. L’utilisateur peut toujours interagir avec l’application et modifier le statut de l’attribut checked.

Définir l’attribut checked sur true ou false signifierait que les utilisateurs ne seraient pas autorisés à modifier son statut.