상태 데이터로 소품 업데이트하기

Question

사용자로부터 연락처 포럼 제출을 처리하는 구성 요소가 있습니다. 사용자가 제출하여 내 소품 데이터에 추가하는 상태를 취하고 싶습니다. 지금 모든 것은 작동하지만 handleSubmit, 상태를 가져 와서 this.data.props에 전달하여 새 객체를 포함하도록 데이터를 업데이트하는 방법을 모르겠습니다.

내 데이터는 개체의 배열입니다. 상태는 사용자 입력을 받아 업데이트합니다. 다음으로 상태 객체를 가져와 내 props.data에 추가 한 다음 화면에 표시하려고합니다.

편집 : 최신 코드로 업데이트

형태의 구성 요소에 소품으로 내려 data 통과 부모 컨테이너를 데 당신이 여기에서 찾고있다

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

. 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

업데이트 : 또한 연락처에 쉽게 this.state.data.map(function(value, index)