Реагировать обновление реквизита с данными состояния

Question

У меня есть компонент, который обрабатывает заявку на контактный форум от пользователя. Я хочу принять состояние, которое пользователь представляет и добавляет в мои реквизиты. Сейчас все работает, но handleSubmit, я не уверен, как взять состояние и передать его в мой this.data.props, чтобы обновить данные, чтобы включить новый объект.

Мои данные - это массив объектов. Состояние принимает пользовательский ввод и само обновление. Затем я хочу взять объект state и добавить его в свой файл props.data, а затем отобразить его на экране.

EDIT: обновляется с последними КОДЕКСА

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

Что вы смотрите здесь, имеющий родительский контейнер, который проходит вниз data в качестве реквизита в виде компонента. У вас уже есть свой компонент Contact, поэтому вы можете заставить его удерживать состояние данных.

Как это работает, вы должны написать функцию в компоненте «Контакт», которая называется addContact, и она будет связываться как аргумент, а затем установить ее собственное состояние с новым контактом IE, связанным с его собственным массивом данных, через состояние настройки ,

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

, а затем в функции handleSubmit все, что вам нужно сделать, это добавить

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

это будет толкать его на массив данных в родительском компоненте, а затем, как только обновления компонентов родительскими он будет проходить, что вниз как опоры для компонента формы.

Вот код, показывающий все, что в действии. http://codepen.io/finalfreq/pen/VKPXoN

UPDATE: Также в списке контактов добавлены как отображать данные, вы можете легко заменить lodash _.map с this.state.data.map(function(value, index)