Gestion des formulaires dans React

Comment gérer les formulaires dans une application React

Les formulaires sont l'un des rares éléments HTML interactifs par défaut.

Ils ont été conçus pour permettre à l'utilisateur d'interagir avec une page.

Utilisations courantes des formulaires?

  • Chercher
  • Formulaires de contact
  • Caisse de paniers d'achat
  • Connexion et inscription
  • et plus!

En utilisant React, nous pouvons rendre nos formulaires beaucoup plus interactifs et moins statiques.

Il existe deux façons principales de gérer les formulaires dans React, qui diffèrent à un niveau fondamental: la façon dont les données sont gérées.

  • si les données sont gérées par le DOM, nous les appelonscomposants incontrôlés
  • si les données sont gérées par les composants nous les appelonscomposants contrôlés

Comme vous pouvez l'imaginer, les composants contrôlés sont ce que vous utiliserez la plupart du temps. L'état du composant est la seule source de vérité, plutôt que le DOM. Mais parfois, vous êtes obligé d'utiliser des composants incontrôleurs, par exemple lors de l'utilisation de certains champs de formulaire qui sont intrinsèquement incontrôlés en raison de leur comportement, comme le<input type="file">domaine.

Lorsqu'un état d'un élément change dans un champ de formulaire géré par un composant, nous le suivons à l'aide duonChangeattribut.

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
  }

handleChange(event) {}

render() { return ( <form> Username: <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

Avec les composants de classe, pour définir le nouvel état, nous devons lierthisà lahandleChangeméthode, sinonthisn'est pas accessible depuis cette méthode:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

render() { return ( <form> <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

De même, nous utilisons leonSubmitattribut sur le formulaire pour appeler lehandleSubmitméthode lors de la soumission du formulaire:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

handleSubmit(event) { alert(this.state.username) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“text” value={this.state.username} onChange={this.handleChange} /> <input type=“submit” value=“Submit” /> </form> ) } }

Utilisantcrochetstout est beaucoup plus simple:

const Form = props => {
  const [username, setUsername] = useState()

const handleChangeUsername = e => { setUsername(e.target.value) }

const handleSubmit = event => { alert(username) event.preventDefault() }

render() { return ( <form onSubmit={handleSubmit}> Username: <input type=“text” value={username} onChange={handleChangeUsername} /> </form> ) } }

La validation dans un formulaire peut être gérée dans lehandleChangeméthode: vous avez accès à l'ancienne valeur de l'état, et à la nouvelle. Vous pouvez vérifier la nouvelle valeur et si elle n'est pas valide rejeter la valeur mise à jour (et la communiquer d'une manière ou d'une autre à l'utilisateur).

Les formulaires HTML sont incohérents. Ils ont une longue histoire, et cela se voit. React rend cependant les choses plus cohérentes pour nous, et vous pouvez obtenir (et mettre à jour) des champs en utilisant sonvalueattribut.

Voici untextarea, par exemple:

<textarea value={this.state.address} onChange={this.handleChange} />

Il en va de même pour leselectétiqueter:

<select value="{this.state.age}" onChange="{this.handleChange}">
  <option value="teen">Less than 18</option>
  <option value="adult">18+</option>
</select>

Auparavant, nous avons mentionné le<input type="file">domaine. Cela fonctionne un peu différemment.

Dans ce cas, vous devez obtenir une référence au champ en attribuant lerefattribut à une propriété définie dans le constructeur avecReact.createRef(), et utilisez-le pour en obtenir la valeur dans le gestionnaire de soumission:

class FileInput extends React.Component {
  constructor(props) {
    super(props)
    this.curriculum = React.createRef()
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleSubmit(event) { alert(this.curriculum.current.files[0].name) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“file” ref={this.curriculum} /> <input type=“submit” value=“Submit” /> </form> ) } }

C'est lecomposants incontrôléschemin. L'état est stocké dans le DOM plutôt que dans l'état du composant (remarquez que nous avons utiliséthis.curriculumpour accéder au fichier téléchargé, et n'ont pas touché lestate.

Je sais ce que vous pensez - au-delà de ces bases, il doit y avoir une bibliothèque qui simplifie tout ce travail de gestion de formulaire et automatise la validation, la gestion des erreurs et plus, n'est-ce pas? Il y en a un grand,Formik.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: