Reactjs 如何呈现子组件中输入字段的更新值

我有一个react js父组件。当它被调用时，会打开一个显示用户记录的欢迎页面。该页面上还有一个注册按钮。当单击注册按钮时，会打开一个对话框，询问用户详细信息。我的要求是数据应该从对话框流向欢迎页面（以及先前呈现的用户）。它应该包括更新的记录。我已经尝试使用回调函数

onSubmitHandle(p1,p2,p3,p4) { 
  this.setState({students: [...this.state.students, {
    id:p1,
    name:p2,
    age:p3,
    email:p4
  }]})
};

我的待办事项组件：

import React, { Component } from 'react';
import './Todo.css';
import FormDialog from './FormDialog';
import Dialog from '@material-ui/core/Dialog';
import { thisExpression } from '@babel/types';

class Todo extends Component {
  state = {
    edit: false,
    id: null,
    view: false,
    students: [
      { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
      { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
      { id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
      { id: 4, name: 'Asad', age: 25, email: 'asad@email.com' },
      { id: 5, name: 'kiwi', age: 20, email: 'kiwi@email.com' }
    ]
  };

  onDeleteHandle() {
    let id = arguments[0];
    this.setState({
      students: this.state.students.filter(item => {
        if (item.id !== id) {
          return item;
        }
      })
    });
  }

  onUpdateHandle(event) {
    event.preventDefault();
    this.setState({
      students: this.state.students.map(item => {
        if (item.id === this.state.id) {
          item['id'] = event.target.updatedItem.value;
          item['name'] = event.target.updatedItem1.value;
          item['age'] = event.target.updatedItem2.value;
          item['email'] = event.target.updatedItem3.value;
        }
        return item;
      })
    });
    this.setState({ edit: false });
  }

  signUpDialog() {
    this.setState({ view: true });
  }

  renderEditForm() {
    if (this.state.edit) {
      return (
        <form onSubmit={this.onUpdateHandle.bind(this)}>
          <input type="text" name="updatedItem" className="item" defaultValue={this.state.id} />
          <input type="text" name="updatedItem1" className="item" defaultValue={this.state.name} />
          <input type="text" name="updatedItem2" className="item" defaultValue={this.state.age} />
          <input type="text" name="updatedItem3" className="item" defaultValue={this.state.email} />
          <button className="update-add-item">Update</button>
        </form>
      );
    }
  }

  onEditHandle(event) {
    this.setState({ edit: true, id: arguments[0], name: arguments[1], age: arguments[2], email: arguments[3] });
  }

  onSubmitHandle(p1, p2, p3, p4) {
    this.setState({ students: [...this.state.students, { id: { p1 }, name: { p2 }, age: { p3 }, email: { p4 } }] });
  }

  render() {
    return (
      <div style={{ width: '500px', background: 'beige' }}>
        <form>
          <button onClick={this.signUpDialog.bind(this)}>Sign-UP</button>
          {this.state.view ? <FormDialog details={this.onSubmitHandle} /> : null}
          <table>
            {this.state.students.map(abc => (
              <tr>
                <td>{abc.id}</td>
                <td>{abc.name}</td>
                <td>{abc.age}</td>
                <td>{abc.email}</td>
                <td>
                  <button onClick={this.onDeleteHandle.bind(this, abc.id)}>Delete</button>
                </td>
                <button onClick={this.onEditHandle.bind(this, abc.id, abc.name, abc.age, abc.email)}>Edit</button>
              </tr>
            ))}
          </table>
        </form>{' '}
      </div>
    );
  }
}

export default Todo;

import React，{Component}来自'React'；
导入“/Todo.css”；
从“/FormDialog”导入FormDialog；
从“@material ui/core/Dialog”导入对话框；
从'@babel/types'导入{thisExpression}；
类Todo扩展组件{
状态={
编辑：false，
id:null，
观点：错，
学生：[
{id:1，姓名：'Wasif'，年龄：21岁，电子邮件：'wasif@email.com' },
{id:2，姓名：'Ali'，年龄：19岁，电子邮件：'ali@email.com' },
{id:3，姓名：'Saad'，年龄：16岁，电子邮件：'saad@email.com' },
{id:4，姓名：'Asad'，年龄：25岁，电子邮件：'asad@email.com' },
{id:5，姓名：'kiwi'，年龄：20岁，电子邮件：'kiwi@email.com' }
]
};
onDeleteHandle（）{
设id=arguments[0]；
这是我的国家({
学生：this.state.students.filter（项=>{
如果（item.id！==id）{
退货项目；
}
})
});
}
onUpdateHandle（事件）{
event.preventDefault（）；
这是我的国家({
学生：this.state.students.map（项目=>{
if（item.id==this.state.id）{
项['id']=event.target.updateItem.value；
项['name']=event.target.updatedItem1.value；
item['age']=event.target.updateItem2.value；
项['email']=event.target.updateItem3.value；
}
退货项目；
})
});
this.setState（{edit:false}）；
}
注册对话框（）{
this.setState（{view:true}）；
}
renderditform（）{
if（this.state.edit）{
返回(
更新
);
}
}
onEditHandle（事件）{
this.setState（{edit:true，id:arguments[0]，name:arguments[1]，age:arguments[2]，email:arguments[3]}）；
}
onSubmitHandle（p1、p2、p3、p4）{
this.setState（{students:[…this.state.students，{id:{p1}，name:{p2}，age:{p3}，email:{p4}]}）；
}
render（）{
返回(
报名
{this.state.view？：null}
{this.state.students.map（abc=>(
{abc.id}
{abc.name}
{abc.age}
{abc.email}
删除
编辑
))}
{' '}
);
}
}
导出默认Todo；

下面是我的子组件，它有一个对话框

import React, { Component } from 'react';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

class FormDialog extends Component {
  constructor(props) {
    super(props);
    this.state = { edit: false, view: true };
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }
  handleClose() {
    this.setState({ view: !this.state.view });
  }
  onDeleteHandle() {
    let id = arguments[0];
    this.setState({
      students: this.state.students.filter(item => {
        if (item.id !== id) {
          return item;
        }
      })
    });
  }

  onEditHandle(event) {
    this.setState({ edit: true, id: arguments[0], name: arguments[1], age: arguments[2], email: arguments[3] });
  }
  onUpdateHandle(event) {
    event.preventDefault();
    this.setState({
      students: this.state.students.map(item => {
        if (item.id === this.state.id) {
          item['id'] = event.target.updatedItem.value;
          item['name'] = event.target.updatedItem1.value;
          item['age'] = event.target.updatedItem2.value;
          item['email'] = event.target.updatedItem3.value;
        }
        return item;
      })
    });
    this.setState({ edit: false });
  }

  renderEditForm() {
    if (this.state.edit) {
      return (
        <form onSubmit={this.onUpdateHandle.bind(this)}>
          <input type="text" name="updatedItem" className="item" defaultValue={this.state.id} />
          <input type="text" name="updatedItem1" className="item" defaultValue={this.state.name} />
          <input type="text" name="updatedItem2" className="item" defaultValue={this.state.age} />
          <input type="text" name="updatedItem3" className="item" defaultValue={this.state.email} />
          <button className="update-add-item">Update</button>
        </form>
      );
    }
  }

  onSubmitForm(event) {
    this.props.details(
      event.target.id.value,
      event.target.item.value,
      event.target.xyz.value,
      event.target.email.value
    );
  }

  render() {
    return (
      <div>
        <Dialog fullWidth open={this.state.view} onClose={this.handleClose.bind(this)}>
          <DialogTitle>Sign Up Provide Details</DialogTitle>
          <DialogContent>
            {this.renderEditForm()}

            <DialogContentText>
              <div>
                <form onSubmit={e => this.onSubmitForm(e)}>
                  <label>ID</label>
                  <input type="number" name="id" className="item" />
                  <label>Name</label>
                  <input type="text" name="item" className="item" />
                  <label>age</label>
                  <input type="number" name="xyz" className="item" />
                  <label>email</label>
                  <input type="text" name="email" className="item" />
                  <button className="btn-add-item">Add</button>
                </form>
              </div>
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose.bind(this)} color="primary">
              Cancel
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

export default FormDialog;

import React，{Component}来自'React'；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
类FormDialog扩展组件{
建造师（道具）{
超级（道具）；
this.state={edit:false，view:true}；
this.onSubmitForm=this.onSubmitForm.bind（this）；
}
handleClose（）{
this.setState（{view:！this.state.view}）；
}
onDeleteHandle（）{
设id=arguments[0]；
这是我的国家({
学生：this.state.students.filter（项=>{
如果（item.id！==id）{
退货项目；
}
})
});
}
onEditHandle（事件）{
this.setState（{edit:true，id:arguments[0]，name:arguments[1]，age:arguments[2]，email:arguments[3]}）；
}
onUpdateHandle（事件）{
event.preventDefault（）；
这是我的国家({
学生：this.state.students.map（项目=>{
if（item.id==this.state.id）{
项['id']=event.target.updateItem.value；
项['name']=event.target.updatedItem1.value；
item['age']=event.target.updateItem2.value；
项['email']=event.target.updateItem3.value；
}
退货项目；
})
});
this.setState（{edit:false}）；
}
renderditform（）{
if（this.state.edit）{
返回(
更新
);
}
}
onSubmitForm（事件）{
这个。道具。细节(
event.target.id.value，
event.target.item.value，
event.target.xyz.value，
event.target.email.value
);
}
render（）{
返回(
注册并提供详细信息
{this.renderditform（）}
此.onSubmitForm（e）}>
身份证件
名称
年龄
电子邮件
添加
取消
);
}
}
导出默认窗体对话框；

如您所见，提交时的表单调用onSubmitForm（），该函数依次将4个输入字段的值传递给父组件。当我检查alert（p1）、alert（p2）、alert（p3）和alert（p4）时，这些值正在到达父组件。 但是我无法使用this.setState（{students:[…this.state.students，{id:{p1}，name:{p2}，age:{p3}，email:{p4}]}）设置学生数组的状态

---

关于如何设置students数组的状态并在页面中重新呈现整个数组的任何帮助。

这里有多个问题：

这是第一个

{
  id: { p1: 123 },
  name: { p2: 'test name' },
  age: { p3: 18 },
  email: { p4: 'abc@xyz.com }
}

但是你需要像<

onSubmitHandle(p1,p2,p3,p4) { 
  this.setState({students: [...this.state.students, {
    id:p1,
    name:p2,
    age:p3,
    email:p4
  }]})
};

onSubmitHandle(id,name,age,email) { 
  this.setState({students: [...this.state.students, {
    id,
    name,
    age,
    email
  }]})
}; 

<FormDialog details={this.onSubmitHandle.bind(this)} />

onSubmitForm(event) {
    event.preventDefault();
    this.props.details(
      event.target.id.value,
      event.target.item.value,
      event.target.xyz.value,
      event.target.email.value
    );
  }