Envoi de grandes formes avec rea.js

Question

C'est une douleur de travailler avec react.js quand il s'agit de la forme. J'étais angulaire, à cause de 2 façons de lier les choses, c'est rapide d'intégrer les choses. Mais quand je réagis, j'avoue que je suis perdu.

dit que c'est un profil d'utilisateur, je suis arrivé ces données de l'API

var profile = { 
    name:"Gaila", 
    age:22, 
    skills: [{id:1,name:"react"},{id:1,name:"angular"}], 
    club: [{id:1,name:"dancing"},{id:1,name:"hiking"}], 
    description: "some long string" 
}; 

sur l'interface utilisateur que j'ai text input, textarea, checkbox et select.

Comment le gérer lorsque l'utilisateur clique sur Enregistrer? Dois-je lier tous les éléments d'entrée avec onChange? comme handleNameChange, handleAgeChange, handleSkillsChange .. omg c'est ridicule.

Alors ref est venu dans mon esprit, facile, il suffit de faire ref="name" et je peux l'obtenir par ReactDOM.findDOMNode(this.refs.name).value, mais attendez, il ne fonctionne pas sur <select>, il est mauvais parfois j'utiliser ref, parfois je vais avec la fonction de poignée.

Les gars, j'ai sérieusement besoin d'aide!

Answer 1

Voici un exemple de réutilisation d'un gestionnaire d'événements et de ramasser les différences de l'événement. Voir en action au codepen.

const FormFunc =() => { 

    const changeHandler = (e) => { 
    console.log(`e.target.name, name: `, e.target.name, e.target.value) 
    } 
    return (
    <form> 
     <input onChange={changeHandler} type='text' name='firstName' /> 
     <input onChange={changeHandler} type='text' name='surname' /> 
     <input onChange={changeHandler} type='phone' name='phone' /> 
     <input onChange={changeHandler} type='email' name='email' /> 
    </form> 
) 
} 

Answer 2

Si vous avez seulement besoin d'extraire des valeurs de formulaire, vous pouvez utiliser form-serialize - il est disponible en tant que package via npm.

Dans votre composant, ajoutez un soumettre événement à votre formulaire:

<form onSubmit={this.handleSubmit}> 

Votre gestionnaire extrait la forme comme ceci:

handleSubmit = (event) => { 
    event.preventDefault() 
    const values = serializeForm(event.target, { hash: true }) 
    console.log(values) 
}