seance10 1 cours

return ( <form onSubmit={handleSubmit}> <label> Nom : <input type="text" name="nom" value={nom} onChange={handleChange} /> </label> <input type="submit" value="Envoyer" /> </form>

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);

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>

Après avoir affiché le composant et tapé quelques caractères dans le champ de saisie, nous obtenons l’affichage suivant :

10.2. Gérer les champs de saisie multilignes Un champ de saisie multiligne se définit grâce à l’élément <textarea>. Créons un composant <TextArea> qui «améliore» l’élément <textarea> traditionnel.

Commençons par un composant de base permettant de créer un élément <textarea> classique. Il s’utilisera sous la forme suivante: <TextArea cols={40} rows={10} value="Tapez votre texte ici" />

Comme on l’avait vu précédemment pour les champs de saisie, il faut implémenter l’événement onChange afin que la saisie soit prise en compte dans le champ. De plus, le state doit comporter la valeur saisie dans le champ, afin que cette valeur soit automatiquement rafraîchie lors de la saisie.

La propriété value définie dans le composant devra donc servir à initialiser la propriété value du state. Implémentation du composant <TextArea> de base Méthode 1 : Composant fonctionnel TextArea.js import { useState } from "react"; const FTextArea = (props) => { const [message, setMessage] = useState(props.value); const handlerChange=(event)=>{ setMessage(event.target.value);

return ( <textarea cols={props.cols} rows={props.rows} value={message} onFocus={handlerFocus.bind(this)} onChange={handlerChange.bind(this)} />