Réactualiser les accessoires de mise à jour avec des données d'état

Question

J'ai un composant qui gère une soumission de forum de contact d'un utilisateur. Je veux prendre l'état que l'utilisateur soumet et l'ajouter à mes données d'accessoires. Maintenant tout fonctionne, mais le handleSubmit, je ne sais pas comment prendre l'état et le passer à mon this.data.props pour mettre à jour les données pour inclure le nouvel objet.

Mes données sont un tableau d'objets. L'état prend l'entrée de l'utilisateur et se met à jour automatiquement. Ensuite, je veux prendre l'objet d'état et l'ajouter à mes props.data et ensuite l'afficher sur l'écran.

EDIT: MISE À JOUR Le dernier code

import React, { Component, PropTypes } from 'react'; 


const testData = [ 
    { 
     name: 'Joe', 
     email: 'joemail' 
    }, 

    { 
     name: 'Bill', 
     email: 'billmail' 
    }, 

    { 
     name: 'Dude', 
     email: 'dudemail' 
    } 
] 

class FormContact extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      formValues: { 
       name: '', 
       email: '' 
      } 
     } 
    } 

    handleChange(event) { 
     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("NEW FORM VALUES " + this.state.formValues.name + " " + this.state.formValues.email); 
     const {name, email} = this.state.formValues 
     this.props.addContact({name, email}); 
    } 

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

FormContact.PropTypes = { 
    data: PropTypes.arrayOf(
     PropTypes.object 
    ) 
} 

FormContact.defaultProps = { 
    data: testData 
} 

class Contact extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      data: testData 
     } 
    } 

    addContact(contact) { 
     this.setState({data: this.state.data.concat(contact)}); 
    } 


    render() { 
     const renObjData = this.props.data.map((anObjectMapped, index) => { 
      return (<p key={index}> 
         Name: {anObjectMapped.name} < br/> 
         Email: {anObjectMapped.email} <br /></p> 
      ) 
     }); 
     return (
      <div> 
       <h1>CONTACT PAGE</h1> 
      <FormContact data={this.state.data} addContact={this.addContact.bind(this)} /> 
       {renObjData} 
      </div> 
     ) 
    } 
} 


Contact.PropTypes = { 
    data: PropTypes.arrayOf(
     PropTypes.object 
    ) 
} 

Contact.defaultProps = { 
    data: testData 
} 


export default Contact; 

Answer 1

Ce que vous cherchez ici est d'avoir un conteneur parent qui passe vers le bas data comme des accessoires pour le composant de formulaire. Vous avez déjà votre composant Contact de sorte que vous pouvez le faire conserver l'état des données. Comment cela fonctionnerait est que vous écririez une fonction sur le composant Contact appelé addContact et il prendrait un contact en tant qu'argument et ensuite définir son propre état avec le nouveau contact IE concattez-le à son propre tableau de données à travers l'état de réglage .

class Contact extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
     data: testData 
     } 
    } 


    addContact = (contact) => { 
    this.setState({data: this.state.data.concat(contact)}); 
    }; 



    render() { 
    const contacts = _.map(this.state.data, (value, index) => { 
     return <li key={index + value}> {value.email} {value.name} </li> 
    }) 
    return (
    <div> 
     <h1>CONTACT PAGE</h1> 
     <FormContact data={this.state.data} addContact={this.addContact} /> 
     <h3> Contacts</h3> 
     <ul>{contacts} </ul> 
    </div> 
    ) 
    } 
} 

puis dans votre fonction handleSubmit tout ce que vous devez faire est d'ajouter

handleSubmit(event) { 
    event.preventDefault(); 
    const {name, email} = this.state.formValues 
    this.props.addContact({name, email}) 
} 

cela pousser sur le tableau de données dans le composant parent, puis une fois les mises à jour des composants de parent, il passera que bas comme accessoires au composant de forme.

Voici un stylo de code montrant tout cela en action. http://codepen.io/finalfreq/pen/VKPXoN

MISE À JOUR: Toujours dans Contacts a ajouté comment afficher les données, vous pouvez facilement remplacer lodash _.map avec this.state.data.map(function(value, index)

données