Reactjs 如何将数据从对话框传递到父组件中定义的表。？

我有一个根组件。从此我进入欢迎页面，该页面显示已以表格格式注册的用户的详细信息。有一个注册按钮。 单击“注册”按钮后，将打开一个对话框，询问新用户的详细信息。我的要求是，当我在“注册”框中提供详细信息时，数据应从对话框流向“欢迎页面”表（如CRUD表单）。 这是我的密码：

   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(event) { 

      event.preventDefault();
      this.setState({students: [...this.state.students, {id:event.target.id.value,name: event.target.item.value,age:event.target.xyz.value,email:event.target.email.value}]  })
        event.target.item.value = '';
        event.target.id.value = parseInt(event.target.id.value)+parseInt(1);
        event.target.email.value = '';
        event.target.xyz.value = ''};        

     render() 

          {    
           return<div style={{width: "500px",background : "beige"}} >  



                 <button onClick={this.signUpDialog.bind(this)}>Sign-UP</button>
                 {this.state.view? <FormDialog/> :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></div>  
              }
            }

              export default Todo;

import React，{Component}来自'React'；
导入“./Todo.css”
从“./FormDialog”导入FormDialog
从“@material ui/core/Dialog”导入对话框；
从'@babel/types'导入{thisExpression}；
类Todo扩展组件{
状态={edit:false，id:null，view:false，
学生：[
{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（）{let id=参数[0]；
this.setState（{students:this.state.students.filter（item=>{if（item.id！==id））
{return item；}}}}）；}
onUpdateHandle（事件）{
event.preventDefault（）；
this.setState（{students:this.state.students.map（item=>{
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（事件）{
event.preventDefault（）；
this.setState（{students:[…this.state.students，{id:event.target.id.value，name:event.target.item.value，age:event.target.xyz.value，email:event.target.email.value}]}）
event.target.item.value=''；
event.target.id.value=parseInt（event.target.id.value）+parseInt（1）；
event.target.email.value=''；
event.target.xyz.value=''}；
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,
      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' }
     ],
    };
    this.onSubmitHandle = this.onSubmitHandle.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>    }  }

  onSubmitHandle(event) {

    event.preventDefault();
    this.setState({students: [...this.state.students, {id:event.target.id.value,name: event.target.item.value,age:event.target.xyz.value,email:event.target.email.value}]  })
      event.target.item.value = '';
      event.target.id.value = parseInt(event.target.id.value)+parseInt(1);
      event.target.email.value = '';
      event.target.xyz.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.onSubmitHandle(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>                 
                   <table>{this.state.students.map(abc =>  (<tr><td>{abc.id}</td><td>{abc.name}</td><td>{abc.age}</td><td>{abc.email}</td>

                    <button onClick={this.onEditHandle.bind(this,abc.id,abc.name,abc.age,abc.email)}>Edit</button>
                    </tr>))}</table>
                    </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，
观点：没错，
学生：[
{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' }
],
};
this.onSubmitHandle=this.onSubmitHandle.bind（this）；
}
handleClose（）{
this.setState（{view:！this.state.view}）
}
onDeleteHandle（）{let id=参数[0]；
this.setState（{students:this.state.students.filter（item=>{if（item.id！==id））
{return item；}}}}）；}
onEditHandle（事件）
{   
this.setState（{edit:true，id:arguments[0]，name:arguments[1]，age:arguments[2]，email:arguments[3]}）；
}
onUpdateHandle（事件）{
event.preventDefault（）；
this.setState（{students:this.state.students.map（item=>{
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）{
返回
更新
}  }
onSubmitHandle（事件）{
event.preventDefault（）；
this.setState（{students:[…this.state.students，{id:event.target.id.value，name:event.target.item.value，age:event.target.xyz.value，email:event.target.email.value}]}）
event.target.item.value=''；
event.target.id.value=parseInt（event.target.id.value）+parseInt（1）；
event.target.email.value=''；
event.target.xyz.value=''；
}; 
render（）{
返回(
注册并提供详细信息
{this.renderditform（）}
this.onSubmitHandle（e）}>
身份证件
名称
年龄
电子邮件
添加
{this.state.students.map（abc=>（{abc.id}{abc.name}{abc.age}{abc.email}
编辑
))}
取消
);
}
}
导出默认窗体对话框；

您可以向自己传递回调函数

<FormDialog onFormSubmission={this.onFormSubmission}/>