Reactjs 如何在react js的对话框中自动填充数据？

我有一个根组件，从中我调用欢迎页面，该页面显示已注册学生的详细信息以及每行的编辑和删除按钮。 “删除”功能工作正常，用于删除一行，但我的要求是，当我单击“编辑”按钮时，所选学生的详细信息应自动填充到对话框中，更新完成后，最终结果应发布回起始页。 App-->Todo.js-->EditDialog.js

App.js


import React, { Component } from 'react';
import FormDialog from './FormDialog'
import Todo from './ToDo'
import EditDialog from './EditDialog'



import './App.css';



class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      mode: false
    };

  }

  showForm()
  {
    this.setState({mode:!this.state.mode})
  }

  render() {
    return (
      <div className="App">        
        <button onClick={this.showForm.bind(this)}>Welcome</button>
        {this.state.mode? <Todo/>:null}


        </div>

    );
  }
}

export default App;

import React, {Component} from 'react';
import Todo from './ToDo'
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 EditDialog extends Component{
    constructor(props){

        super(props);
        this.state={editDetails: true,view:false}
    }
    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.editDetails) {
        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>    }  }
         handleClose(){
            this.setState({view:!this.state.view})
          }




    render()
    {
     return(
     <div> 


          <Dialog  open>
          <DialogTitle>Edit The Details</DialogTitle>
              <form>
              <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>
                  <Button onClick={this.handleClose.bind(this)} color="primary">
            Cancel
          </Button></Dialog>   


     </div> )

    }

}
export default EditDialog;

App.js
从“React”导入React，{Component}；
从“./FormDialog”导入FormDialog
从“./Todo”导入Todo
从“/EditDialog”导入EditDialog
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
模式：false
};
}
showForm（）
{
this.setState（{mode:！this.state.mode}）
}
render（）{
返回(
欢迎
{this.state.mode？：null}
);
}
}
导出默认应用程序；

Todo.js

import React, { Component } from 'react';
import './Todo.css'
import EditDialog from './EditDialog'
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,editview: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(id,name,age,email){

    this.setState({students: this.state.students.map(item => {
      if (item.id === this.state.id){
        item['id'] = id;        
        item['name']=name;
        item['age']=age;
        item['email']=email;
      }return item;})})
      this.setState({edit: false});
  }


  signUpDialog(){
    this.setState({view:!this.state.view})
  }   

  editFormDialog(){
    this.setState({editview:!this.state.editview})
  }


  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(id,name,age,email) { 

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



     render() 

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


                  <button onClick={this.signUpDialog.bind(this)}>Sign-UP</button>
                 {this.state.view? <FormDialog details={this.onSubmitHandle.bind(this)}/> :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.editFormDialog.bind(this)}>Edit</button>
                    {this.state.editview? <EditDialog updDetails={this.onUpdateHandle.bind(this)}/>:null}

                    </tr>))}</table> </div>  
              }
            }

              export default Todo;

import React，{Component}来自'React'；
导入“./Todo.css”
从“/EditDialog”导入EditDialog
从“./FormDialog”导入FormDialog
从“@material ui/core/Dialog”导入对话框；
从'@babel/types'导入{thisExpression}；
类Todo扩展组件{
state={edit:false，id:null，view:false，editview: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；}}}}）；}
onUpdate句柄（id、姓名、年龄、电子邮件）{
this.setState（{students:this.state.students.map（item=>{
if（item.id==this.state.id）{
项目['id']=id；
项目['name']=名称；
项目[‘年龄]]=年龄；
项目['email']=电子邮件；
}返回项；}）}）
this.setState（{edit:false}）；
}
注册对话框（）{
this.setState（{view:！this.state.view}）
}   
editFormDialog（）{
this.setState（{editview:！this.state.editview}）
}
renderditform（）{
if（this.state.edit）{
返回
更新
}  }
onEditHandle（事件）{
this.setState（{edit:true，id:arguments[0]，name:arguments[1]，age:arguments[2]，email:arguments[3]}）；}
onSubmitHandle（id、姓名、年龄、电子邮件）{
this.setState（{学生：[…this.state.students{
id:id，
姓名:姓名,，
年龄:年龄,，
电邮：电邮
}]})
}; 
render（）
{    
返回
报名
{this.state.view？：null}
{this.state.students.map（abc=>（{abc.id}{abc.name}{abc.age}{abc.email}
删除
编辑
{this.state.editview？：null}
))}   
}
}
导出默认Todo；

EditDialog.js

App.js


import React, { Component } from 'react';
import FormDialog from './FormDialog'
import Todo from './ToDo'
import EditDialog from './EditDialog'



import './App.css';



class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      mode: false
    };

  }

  showForm()
  {
    this.setState({mode:!this.state.mode})
  }

  render() {
    return (
      <div className="App">        
        <button onClick={this.showForm.bind(this)}>Welcome</button>
        {this.state.mode? <Todo/>:null}


        </div>

    );
  }
}

export default App;

import React, {Component} from 'react';
import Todo from './ToDo'
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 EditDialog extends Component{
    constructor(props){

        super(props);
        this.state={editDetails: true,view:false}
    }
    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.editDetails) {
        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>    }  }
         handleClose(){
            this.setState({view:!this.state.view})
          }




    render()
    {
     return(
     <div> 


          <Dialog  open>
          <DialogTitle>Edit The Details</DialogTitle>
              <form>
              <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>
                  <Button onClick={this.handleClose.bind(this)} color="primary">
            Cancel
          </Button></Dialog>   


     </div> )

    }

}
export default EditDialog;

import React，{Component}来自'React'；
从“./Todo”导入Todo
从“@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；
类EditDialog扩展组件{
建造师（道具）{
超级（道具）；
this.state={editDetails:true，view:false}
}
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.editDetails）{
返回
更新
}  }
handleClose（）{
this.setState（{view:！this.state.view}）
}
render（）
{
返回(
编辑详细信息
身份证件
名称
年龄
电子邮件
添加
取消
)
}
}
导出默认编辑对话框；

我使用了回调函数和传递更新函数。

---

但是对于编辑对话框，详细信息不是自动填充的，我还需要在对话框中执行更新并将结果发布回来。

问题：

您将

放入文件

ToDo.js

中的数组循环（

students.map

）中，因此当您的状态（

state.editview

）变为

true

时，您会同时显示5个对话框，因此无法看到第一个对话框

因此，让我们把它放在循环之外（映射）：

2）将学生ID传递给函数

editFormDialog

就像删除一个一样：

（abc.ID）

4）现在您的

currentStudent

处于您的状态。因此，您必须将它放在

中，然后才能将其访问到

EditDialog

类（EditDialog.js）中。将属性添加到您的

，我将其命名为

currentStudent

，如下所示：

{
    this.state.editview
        ? <EditDialog
            currentStudent={this.state.currentStudent} // THIS PROPERTY
            updDetails={this.onUpdateHandle.bind(this)}
        />
        : null
}

// Add a State to EditDialog
this.state = {
      editDetails: true,
      view: false,
      updatedValues: {
           id: null,
           email: null
      }
}

// We use this to Mount it for the first time (Prevent Loop Renders)    
componentDidMount() {
    this.setState({
        updatedValues: {
            id: this.props.currentStudent[0].id,
            email: this.props.currentStudent[0].email
        }
    });
}

// We should do this to update the input value to the state
<input type="text" name="email" className="item" onInput={this.updateStateHandler} value={this.state.updatedValues.email}/>

// And we of course need the updateHandler method
updateStateHandler = (e) => {
    this.setState({
        updatedValues: {
            ...this.state.updatedValues,
            email: e.target.value
        }
    });
};

handleUpdate(e) {
    e.preventDefault();
    this.props.closeModal();
    this.props.updateStudentHandler(this.state.updatedValues);
}

<EditDialog
      currentStudent={this.state.currentStudent}
      updDetails={this.onUpdateHandle.bind(this)}
      updateStudentHandler={this.updateStudent}
      closeModal={this.closeModal}
/>

我刚填好

handleUpdate(e) {
    e.preventDefault();
    this.props.closeModal();
    this.props.updateStudentHandler(this.state.updatedValues);
}

<EditDialog
      currentStudent={this.state.currentStudent}
      updDetails={this.onUpdateHandle.bind(this)}
      updateStudentHandler={this.updateStudent}
      closeModal={this.closeModal}
/>

updateStudent = (updatedValues) => {

    let newStudents = [...this.state.students];
    newStudents.map(
        student => {
            if (student.id === updatedValues.id) {
                student.email = updatedValues.email;
            }
        }
    );

    this.setState({
        students: newStudents
    });
}

closeModal = () => {
    this.setState({
        editview: false
    });
}

import React, {Component} from 'react';
import './Todo.css'
import EditDialog from './EditDialog'
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, editview: 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'}
        ],
        currentStudent: {}
    }

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

    onUpdateHandle(id, name, age, email) {

        this.setState({
            students: this.state.students.map(item => {
                if (item.id === this.state.id) {
                    item['id'] = id;
                    item['name'] = name;
                    item['age'] = age;
                    item['email'] = email;
                }
                return item;
            })
        })
        this.setState({edit: false});
    }

    signUpDialog() {
        this.setState({view: !this.state.view})
    }

    editFormDialog(id) {

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

        this.setState({editview: !this.state.editview})
    }

    updateStudent = (updatedValues) => {

        let newStudents = [...this.state.students];
        newStudents.map(
            student => {
                if (student.id === updatedValues.id) {
                    student.name = updatedValues.name;
                    student.age = updatedValues.age;
                    student.email = updatedValues.email;
                }
            }
        );

        this.setState({
            students: newStudents
        });
    }

    closeModal = () => {
        this.setState({
            editview: 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>
        }
    }

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

    onSubmitHandle(id, name, age, email) {

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

    render() {
        return <div style={{width: "500px", background: "beige"}}>
            <table>
                <tbody>
                {
                    this.state.students.map(abc => (<tr key={abc.id}>
                        <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>
                        <td>
                            <button onClick={this.editFormDialog.bind(this, abc.id)}>Edit</button>
                        </td>
                    </tr>))
                }
                </tbody>
            </table>

            {
                this.state.editview
                    ? <EditDialog
                        currentStudent={this.state.currentStudent}
                        updDetails={this.onUpdateHandle.bind(this)}
                        updateStudentHandler={this.updateStudent}
                        closeModal={this.closeModal}
                    />
                    : null
            }

        </div>
    }
}

export default 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 EditDialog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editDetails: true,
            view: false,
            updatedValues: {
                id: null,
                name: null,
                age: null,
                email: null
            }
        }
    }

    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.editDetails) {
            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>
        }
    }

    handleClose() {
        this.setState({view: !this.state.view})
    }

    handleUpdate(e) {
        e.preventDefault();
        this.props.closeModal();
        this.props.updateStudentHandler(this.state.updatedValues);
    }

    updateStateHandler = (e) => {
        let newUpdatedValues = {};
        switch (e.target.name) {
            case 'name':
                newUpdatedValues = {
                    ...this.state.updatedValues,
                    name: e.target.value
                };
                break;
            case 'age':
                newUpdatedValues = {
                    ...this.state.updatedValues,
                    age: e.target.value
                };
                break;
            case 'email':
                newUpdatedValues = {
                    ...this.state.updatedValues,
                    email: e.target.value
                };
                break;
            default:
                break;
        }

        this.setState({
            updatedValues: newUpdatedValues
        });
    };

    componentDidMount() {
        this.setState({
            updatedValues: {
                id: this.props.currentStudent[0].id,
                name: this.props.currentStudent[0].name,
                age: this.props.currentStudent[0].age,
                email: this.props.currentStudent[0].email
            }
        });
    }

    render() {
        return (
            <div>
                <Dialog open>
                    <DialogTitle>Edit The Details</DialogTitle>
                    <form>
                        <label>ID</label>
                        <input type="number" name="id" className="item"
                               value={this.state.updatedValues.id} />
                        <label>Name</label>
                        <input type="text" name="name" className="item"
                               onInput={this.updateStateHandler}
                               value={this.state.updatedValues.name} />
                        <label>age</label>
                        <input type="number" name="age" className="item"
                               onInput={this.updateStateHandler}
                               value={this.state.updatedValues.age} />
                        <label>email</label>
                        <input type="text" name="email" className="item"
                               onInput={this.updateStateHandler}
                               value={this.state.updatedValues.email} />
                        <button className="btn-add-item" onClick={this.handleUpdate.bind(this)}>Add</button>

                    </form>
                    <Button onClick={this.handleClose.bind(this)} color="primary">
                        Cancel
                    </Button></Dialog>
            </div>)
    }

}

export default EditDialog;