Réagir la mise à jour de l'état dans les deux champs de saisie du formulaire de soumission

Je suis en train de faire un simple formulaire de contact à l'aide de Réagir. Finalement, je vais envoyer les données recueillies à partir de l'état à une base de données, mais pour l'instant je suis en train de l'obtenir à la console de log les valeurs correctes.

Droit maintenant, le champ e-mail remplace le nom de domaine et quand j'ai du journal de la console, les deux états, le nom et l'email n'est pas défini. Voici mon Réagir Composant

import React, { Component, PropTypes } from 'react';
import ContactData from '../data/ContactData.js';
class FormContact extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
email: '',
textArea: ''
}
}
handleChange(event) {
event.preventDefault();
this.setState({
name: event.target.value,
email: event.target.email
})
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state.name + ' ' + this.state.email);
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<label> Name:
<input type="text" placeholder="Name" value={this.state.name} onChange={this.handleChange.bind(this)} />
</label><br />
<label> Email:
<input type="text" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this)}/>
</label><br />
<input className="btn btn-primary" type="submit" value="Submit" />
</form>
)
}
}
FormContact.PropTypes = {
subName: PropTypes.string,
subEmail: PropTypes.string
}
FormContact.defaultProps = {
subName: 'Sam',
subEmail: ''
}
class Contact extends Component {
render() {
return (
<div>
<h1>CONTACT PAGE</h1>
<FormContact />
</div>
)
}
}
export default Contact;

InformationsquelleAutor user3622460 | 2016-12-08

13

Si je comprends ce que vous voulez, vous pouvez le faire comme suit :
- Ajouter un objet vide dans votre état pour les valeurs d'un formulaire
  
  formValues: {}
- Ajouter le nom de l'attribut à vos champs
  
  <input name="name" .... />
  <input name="email" .... />
- ensuite, selon que le nom de la mise à jour de votre état handleChange fonction
```
let formValues = this.state.formValues;
let name = event.target.name; //Field name
let value = event.target.value; //Field value
formValues[name] = value;
this.setState({formValues})
```
- Et si les valeurs de descendre à un niveau plus profond, vous pouvez utiliser
  value={this.state.formValues["name"]} au lieu de value={this.state.name} - où le nom est la valeur de l'attribut name de votre champ de saisie
Ainsi, tout doit être comme suit :
```
class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
formValues: {}
}
}
handleChange(event) {
event.preventDefault();
let formValues = this.state.formValues;
let name = event.target.name;
let value = event.target.value;
formValues[name] = value;
this.setState({formValues})
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state.formValues);
}
render(){
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<label> Name:
<input type="text" name="name" placeholder="Name" value={this.state.formValues["name"]} onChange={this.handleChange.bind(this)} />
</label><br />
<label> Email:
<input type="text" name="email" placeholder="Email" value={this.state.formValues["email"]} onChange={this.handleChange.bind(this)}/>
</label><br />
<input className="btn btn-primary" type="submit" value="Submit" />
</form>
)
}
}
React.render(<Test />, document.getElementById('container'));
```
Ici est le violon.

Espère que cette aide.
- Je vais mettre cela en place après le travail - ressemble à ce que je cherchais, merci!
- FormContact est en train de changer incontrôlée de saisie de type texte pour être contrôlé. Éléments d'entrée ne doit pas passer de non contrôlée de contrôlée (ou vice versa). Décider entre l'utilisation contrôlée ou non l'élément d'entrée pour la durée de vie du composant. - - Produit cette erreur
- Pour résoudre le incontrôlée d'entrée de problème, vous devez initialiser le formValues objet avec les cordes à vide pour le nom et l'email.
- votre violon est éclaté lorsque je clique sur elle.
- Mis à jour.
InformationsquelleAutor Boky
1

La référence à event.target.email n'existe pas sur le cas de l'élément. La valeur d'une saisie de texte à partir d'une ligne-gestionnaire d'événement est event.target.value pour les deux e-mail et nom. La solution rapide est de créer un gestionnaire distinct pour chaque entrée:
```
handleChangeName(event) { 
event.preventDefault();
this.setState({ name: event.target.value });  //<-- both use the same reference
}                                               //   to get the contextual value
handleChangeEmail(event) {                      //   from the inputs v
event.preventDefault();                       //                   |
this.setState({ email: event.target.value }); //<--------------------
}
```
- Oui, je sais, deux gestionnaires de fonctionner, mais je me sens comme il y a un moyen de gérer tout cela à la fois, sinon plus soumissions de formulaire aurait une TONNE de fonctions de gestionnaire. Il doit y avoir une meilleure façon (n'utilisant pas les refs, parce que j'ai entendu ceux qui étaient en mauvais état)
- Je vois. Dans ce cas, avez-vous essayé de passer un paramètre supplémentaire pour lier: qui sera le nom de la chaîne de la valeur que vous voulez changer? Puis le handleChange méthode pourrait utiliser cette valeur dans la setState de façon dynamique. Une autre option serait de créer une Plus forte Composante de l'Ordre qui encapsule une entrée et efficacement en fait un "idiot" entrée contrôlée.
InformationsquelleAutor Pineda

Vous devez vous connecter pour publier un commentaire.