Reactjs 使用状态数据更新道具

我有一个组件正在处理用户提交的联系人论坛。我想获取用户提交的状态并将其添加到我的道具数据中。现在一切正常，但是handleSubmit，我不确定如何获取状态并将其传递给我的this.data.props以更新数据以包含新对象

我的数据是一个对象数组。状态接受用户输入并自行更新。接下来，我想获取state对象并将其添加到我的props.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;

import React，{Component，PropTypes}来自'React'；
常数testData=[
{
名字：'乔'，
电子邮件：“joemail”
},
{
姓名：'比尔'，
电子邮件：“billmail”
},
{
名字：'老兄'，
电子邮件：“dudemail”
}
]
类FormContact扩展组件{
建造师（道具）{
超级（道具）
此.state={
表单值：{
名称：“”，
电子邮件：“”
}
}
}
手变（活动）{
让formValues=this.state.formValues；
让name=event.target.name；
让值=event.target.value；
formValues[名称]=值；
这是我的国家({
FormValue
});
}
handleSubmit（事件）{
event.preventDefault（）；
log（“新表单值”+this.state.formValues.name+“”+this.state.formValues.email）；
const{name，email}=this.state.formValues
this.props.addContact（{name，email}）；
}
render（）{
返回(
姓名：


电邮：


)
}
}
FormContact.PropTypes={
数据：PropTypes.arrayOf(
PropTypes.object
)
}
FormContact.defaultProps={
数据：testData
}
类接触扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据：testData
}
}
添加联系人（联系人）{
this.setState（{data:this.state.data.concat（contact）}）；
}
render（）{
const renObjData=this.props.data.map（（anObjectMapped，index）=>{
返回（

名称：{anObjectMapped.Name}

电子邮件：{anObjectMapped.Email}

)
});
返回(
联系页面
{renObjData}
)
}
}
Contact.PropTypes={
数据：PropTypes.arrayOf(
PropTypes.object
)
}
Contact.defaultProps={
数据：testData
}
导出默认联系人；

您在这里看到的是一个父容器，它将数据作为道具传递给表单组件。您已经有了

联系人

组件，因此可以使其保持数据状态

它的工作原理是在联系人组件上编写一个名为

addContact

的函数，它将联系人作为参数，然后使用新联系人设置自己的状态，即通过设置状态将其设置为自己的数据数组

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

这将把它推送到父组件中的数据数组上，然后一旦父组件更新，它将把它作为道具传递给表单组件

这是一支代码笔，它显示了所有的动作

---

更新：同样在添加了“如何显示数据”的联系人中，您可以轻松地将lodash

\u.map

替换为

this.state.data.map（函数（值、索引）

您现在看到的是一个父容器，它将

数据作为道具传递给表单组件。您已经有了
联系人
组件，因此可以使其保持数据状态

它的工作原理是在联系人组件上编写一个名为
addContact
的函数，它将联系人作为参数，然后使用新联系人设置自己的状态，即通过设置状态将其设置为自己的数据数组

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

这将把它推送到父组件中的数据数组上，然后一旦父组件更新，它将把它作为道具传递给表单组件

这是一支代码笔，它显示了所有的动作

更新：同样在Contacts added how to display data中，你可以很容易地用this.state.data.map（function（value，index）

替换lodash

\u.map

，数据在this.setState中似乎没有定义（{data:this.state.data.concat（contact）}）；不得不添加this.addContact.bind（this）现在它正确地指向了数据。它现在将数据添加到我的对象数组中，但不更新屏幕上的打印值-只显示前3个联系人，而不显示我添加的任何新联系人。您可以使用最新代码更新您的帖子，以便可以查看

const renObjData=this.props.data.map（（anObjectMapping，index）=>{

需要是

this.state.data.map

not propsdata在this.setState中似乎未定义（{data:this.state.data.concat（contact）}）；必须添加this.addContact.bind（this）现在它正确地指向了数据。它现在将数据添加到我的对象数组中，但不更新屏幕上的打印值-只显示前3个联系人，而不显示我添加的任何新联系人。您可以使用最新代码更新您的帖子，以便可以查看

const renObjData=this.props.data.map（（anObjectMapping，index）=>{

必须是

this.state.data.map

而不是props