Créer des formulaires | Med Learning

Leçon 1

Les formulaires en React

Les formulaires HTML sont différents des autres éléments : ils ont naturellement un état interne (ce qui est tapé dans le champ). Ce formulaire HTML accepte un nom :

html

<form>
  <label>
    Nom :
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Envoyer" />
</form>

À l'envoi, il redirige vers une nouvelle page. Si c'est ce que tu veux, rien à faire en React. Mais en général, on veut gérer l'envoi avec une fonction JavaScript qui accède aux données saisies. La façon classique est d'utiliser des composants contrôlés.

Leçon 2

Les composants contrôlés

NameForm.js (méthode 1 : composant fonction)

jsx

import { useState } from "react";
const NameForm = () => {
  const [nom, setNom] = useState('');
  const handleChange =(event)=>{
    setNom(event.target.value);
  }
  const handleSubmit =(event)=>{
    alert('Le nom a été soumis : ' + nom);
    event.preventDefault();
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nom :
        <input type="text" name="nom" value={nom} onChange={handleChange} />
      </label>
      <input type="submit" value="Envoyer" />
    </form>
  );
};
export default NameForm;

NameForm.js (méthode 2 : composant classe)

jsx

import React from 'react';
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {nom: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({nom: event.target.value});
  }
  handleSubmit(event) {
    alert('Le nom a été soumis : ' + this.state.nom);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Nom :
          <input type="text" name="nom" value={this.state.nom} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Envoyer" />
      </form>
    );
  }
}
export default NameForm;

Tape quelques caractères puis clique sur Envoyer : une boîte affiche « Le nom a été soumis : … ».

Vidéo · À regarder

Apprendre React en 1 heure - Cours complet débutant

Comment Coder · YouTube

Regarde de 1:10:05 à 1:17:197 min 14 s

Ouvrir sur YouTube à 1:10:05

Leçon 3

Les champs multilignes (textarea)

Leçon 4

Les listes de sélection (select)

Leçon 5

Les boutons radio

Leçon 6

Les cases à cocher

Champ	Attribut contrôlé	Ce qu'on lit dans onChange
`<input type="text">`, `<textarea>`, `<select>`	`value`	`event.target.value`
`<input type="checkbox">`	`checked`	`event.target.checked`
`<input type="radio">`	`checked={choix === valeur}`	`event.target.value`

Leçon 7

TP 1 · Le formulaire de connexion

Leçon 8

TP 2 · Le formulaire d'inscription

Travaux pratiques

TP 2 · L'inscription

Exercices

Exercice 9.1

QCM : les formulaires

1Un composant contrôlé a…
2La « source unique de vérité » d'un champ contrôlé est…
3Pour une case à cocher, on lit…
4Dans une classe, this.handleChange.bind(this) sert à…
5En React, l'option sélectionnée d'un <select> se règle avec…
6Des boutons radio du même groupe ont…
7event.preventDefault() dans onSubmit…

0/7 répondues

Exercice 9.2

Le formulaire de contact contrôlé

Exercice 9.3

Les boutons radio contrôlés

L'essentiel du chapitre

À retenir

Composant contrôlé : la valeur vient de l'état (value={x}), chaque saisie le met à jour (onChange) ; l'état est la source unique de vérité. value sans onChange = champ bloqué.
Envoi : <form onSubmit={handleSubmit}> + event.preventDefault().
Classe : this.state, this.setState, .bind(this) dans le constructeur (ou fonctions fléchées) ; fonction : useState, pas de this.
<textarea value={…}> ; <select value={…}> ou defaultValue ; radios : même name, checked ; cases : event.target.checked.
Afficher une erreur : un état errorMessages + {condition && <div className="error">…</div>} ; afficher la réussite : un état isSubmitted + ternaire.

TextArea.js (méthode 1 : fonction)

jsx

import { useState } from "react";
const FTextArea = (props) => {
  const [message, setMessage] = useState(props.value);
  const handlerChange=(event)=>{
    setMessage(event.target.value);
  }
  const handlerFocus=()=>{
    setMessage("");
  }
  return (
    <textarea cols={props.cols}
      rows={props.rows}
      value={message}
      onFocus={handlerFocus.bind(this)}
      onChange={handlerChange.bind(this)} />
  );
};
export default FTextArea;

TextArea.js (méthode 2 : classe)

jsx

import React from 'react';
class TextArea extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message : props.value };
  }
  handlerChange(event) {
    this.setState({message : event.target.value});
  }
  handlerFocus(event) {
    this.setState({message : ""});
  }
  render() {
    return (
      <textarea cols={this.props.cols}
        rows={this.props.rows}
        value={this.state.message}
        onFocus={this.handlerFocus.bind(this)}
        onChange={this.handlerChange.bind(this)} />
    )
  }
}
export default TextArea;

html

<select>
  <option value="1">Element1</option>
  <option value="2">Element2</option>
  <option value="3">Element3</option>
  <option value="4">Element4</option>
  <option value="5">Element5</option>
</select>

Select.js (méthode 1 : fonction)

jsx

const Select = (props) => {
  const handlerChange=(event)=>{
    console.log('key='+event.target.value);
  }
  return (
    <select onChange={handlerChange.bind(this)}>
      {props.options.map(function(option, index) {
        return <option key={index+1} value={index+1}>{option}</option>
      })
      }
    </select>
  );
};
export default Select;

Select.js (méthode 2 : classe, avec onChange)

jsx

import React from 'react';
class Select extends React.Component {
  constructor(props) {
    super(props);
  }
  handlerChange(event) {
    console.log('key='+event.target.value);
  }
  render() {
    return (
      <select onChange={this.handlerChange.bind(this)}>
        {this.props.options.map(function(option, index) {
          return <option key={index+1} value={index+1}>{option}</option>
        })
        }
      </select>
    )
  }
}
export default Select;

<Select defaultValue={4} /> passe defaultValue au composant, mais le composant ne le transmet pas au <select> : rien n'est sélectionné (et il manque la prop options). Il faut le transmettre :

jsx

// dans Select.js
<select defaultValue={props.defaultValue} onChange={handlerChange}>
// utilisation
<Select options={["Element1", "Element2", "Element3", "Element4", "Element5"]} defaultValue={4} />

En version contrôlée, on écrit <select value={choix} onChange={e => setChoix(e.target.value)}> : en React, on choisit l'option sélectionnée avec value sur le <select>, pas avec selected sur l'option.

RadioGroup.js (méthode 1 : fonction)

jsx

const FRadioGroup = (props) => {
  return (
    <div> {
      props.radios.map((radio, index) => {
        return (
          <label key={index+1}><span>{radio.text}</span>
            <input type="radio" value={radio.value} name="radioname" />
          </label>
        )
      }) }
    </div>
  );
};
export default FRadioGroup;

RadioGroup.js (méthode 2 : classe)

jsx

import React from 'react';
class RadioGroup extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div> {
        this.props.radios.map((radio, index) => {
          return (
            <label key={index}><span>{radio.text}</span>
              <input type="radio" value={radio.value}
                name={radio.name} checked={radio.checked} />
            </label>
          )
        }) }
      </div>
    )
  }
}
export default RadioGroup;

index.js

jsx

import RadioGroup from './RadioGroup';
var radios = [
  { value : 1, text : "radio1" },
  { value : 2, text : "radio2" },
  { value : 3, text : "radio3", checked : true },
  { value : 4, text : "radio4" }
];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RadioGroup radios={radios} name="group1" />);

CheckBoxGroup.js

jsx

import React from "react";

class CheckBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checked : props.checked || false };
  }
  handlerChange(event) {
    this.setState({checked : event.target.checked});
  }
  render() {
    return (
      <label>
        <span>{this.props.text}</span>
        <input type="checkbox" value={this.props.value}
          checked={this.state.checked}
          onChange={this.handlerChange.bind(this)} />
        <br/>
      </label>
    )
  }
}

class CheckBoxGroup extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>{
        this.props.checkboxes.map((checkbox, index) => {
          return (
            <CheckBox key={index} text={checkbox.text}
              value={checkbox.value}
              checked={checkbox.checked}
            />
          )
        })
      }
      </div>
    )
  }
}
export default CheckBoxGroup;

index.js

jsx

import CheckBoxGroup from './CheckBoxGroup';
var checkboxes = [
  { value : 1, text : "check1" },
  { value : 2, text : "check2", checked : true },
  { value : 3, text : "check3", checked : true },
  { value : 4, text : "check4" }
];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckBoxGroup checkboxes={checkboxes} />);

jsx

const renderForm = (
  <div className="login-form">
    <div className="title">Connexion</div>
    <div className="form">
      <form onSubmit={handleSubmit}>
        <div className="input-container">
          <label>L'identifiant </label>
          <input type="text" name="uname" required />
          {renderErrorMessage("uname")}
        </div>
        <div className="input-container">
          <label>Mot de passe </label>
          <input type="password" name="upass" required />
          {renderErrorMessage("upass")}
        </div>
        <div className="button-container">
          <input type="submit" value="Se connecter" />
        </div>
      </form>
    </div>
  </div>
);

jsx

const database = [
  { username: "user1", password: "pass1" },
  { username: "user2", password: "pass2" }
];
const errors = {
  uname: "Votre identifiant est incorrect.",
  upass: "Votre mot de passe est incorrect."
};
const handleSubmit = (event) => {
  event.preventDefault();
  var { uname, upass } = document.forms[0];
  setName(uname.value);
  const userData = database.find((user) => user.username === uname.value);
  if (userData) {
    if (userData.password !== upass.value) {
      setErrorMessages({ name: "upass", message: errors.upass });
    } else {
      setIsSubmitted(true);
    }
  } else {
    setErrorMessages({ name: "uname", message: errors.uname });
  }
};

App.css

css

.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  background-color: #f8f9fd;
}
.login-form { background-color: white; padding: 2rem; }
input[type="text"],
input[type="password"] {
  height: 25px;
  width: 250px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
input[type="submit"] {
  margin-top: 10px;
  cursor: pointer;
  font-size: 15px;
  background: #01d28e;
  border: 1px solid #01d28e;
  color: #fff;
  padding: 10px 20px;
}
input[type="submit"]:hover { background: #6cf0c2; }
.button-container { display: flex; justify-content: center; }
.list-container { display: flex; }
.error { color: red; font-size: 15px; }
.title { font-size: 30px; margin-bottom: 20px; text-align: center; }
.input-container { display: flex; flex-direction: column; gap: 8px; margin: 10px; }