【发布时间】：2020-02-07 09:11:35
【问题描述】：
我有一个 react js 父组件。当它被调用时，会打开一个显示用户记录的欢迎页面。此页面上还有一个注册按钮。单击注册按钮时会出现一个对话框打开询问用户详细信息。我的要求是数据应该从对话框流到欢迎页面（以及之前呈现的用户）。它应该包括更新的记录。我尝试使用回调函数。
我的 Todo 组件：
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 } 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;
正如您在提交时看到的表单调用 onSubmitForm() 依次将 4 个输入字段的值传递给父组件。当我使用 alert(p1),alert( p2)、警报(p3) 和警报(p4)。 但是我无法使用 this.setState({students: [...this.state.students, {id:{p1},name:{p2},age:{ p3}，电子邮件：{p4}}] }）。
关于如何设置学生数组的状态并在页面中重新渲染整个数组的任何帮助。
【问题讨论】：
-
是否出现错误？如果是，请分享错误的完整堆栈跟踪。另外，为什么在 p1、p2.. 中使用 '{}'？谢谢
-
没有错误。我的问题是表格没有与新值一起重新渲染。即我无法使用新值设置学生的状态，
-
您可以尝试将您的
onSubmitHandle与父 (Todo) 组件而不是子 (FormDialog) 组件绑定吗？ -
onSubmitHandle 在 Todo 组件中。我将它作为回调函数传递给子组件。
-
我知道但是你想改变的状态存在于父组件中，你可以试试你的函数绑定父组件而不是子组件。