我有一个根组件。从那里我调用欢迎页面，该页面显示已注册的学生的详细信息以及每行中的编辑和删除按钮。删除功能工作正常，用于删除一行，但我的要求是当我单击编辑按钮时，所选学生的详细信息应自动填充在对话框中，更新完成后，最终结果应发布回起始页。应用程序-->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;
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;
编辑对话框.js
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;
我使用了回调函数并传递了更新函数。但是对于 EditDialog 框，详细信息不会自动填充，我还需要在对话框中执行更新并将结果发布回来。