我正在尝试建立一个编辑模式，该模式允许用户更新雇员信息而无需重新路由。我已经构建了模式并将其插入到employeeCard组件中（这是目前为止我知道的最佳方法）。但是，尽管编写了handleFieldChange函数并尝试重置modalOpen上的状态，但我仍无法更改模式输入字段中的信息。
我希望能够从模式中预先填充的内容中更改各个字段，然后单击“提交”按钮，将新信息编译到一个对象中并发布到数据库中。
为了节省空间等，我仅发布了足够的代码来显示模式中的第一个编辑字段。该模态正在被渲染和预先填充，但是我无法更改任何内容。
任何帮助或建议，我们将不胜感激。谢谢！
export default class EmployeeCard extends Component {
state = {
open: false,
name: "",
surname: "",
email: "",
phone: "",
address: "",
city: "",
state: "",
zip: "",
image: "",
hireDate: ""
};
onOpenModal = () => {
// this.setState({ open: true });
return userAPImgr.getOneUser(this.props.match.params.employeeId)
.then(employee => {
this.setState({
name: employee.name,
surname: employee.surname,
email: employee.email,
phone: employee.phone,
address: employee.address,
city: employee.city,
state: employee.state,
zip: employee.zip,
hireDate: employee.hireDate,
open: true
});
})
}
onCloseModal = () => {
this.setState({ open: false });
};
handleFieldChange = evt => {
const stateToChange = {}
stateToChange[evt.target.id] = evt.target.value
this.setState(stateToChange)
}
updateEmployee = evt => {
evt.preventDefault()
// if (this.state.employee === "") {
// window.alert("Please select a caretaker");
// } else {
const editedEmployee = {
id: parseInt(this.props.match.params.employeeId),
name: this.state.name,
surname: this.state.surname,
email: this.state.email,
phone: this.state.phone,
address: this.state.address,
city: this.state.city,
state: this.state.state,
zip: this.state.zip,
hireDate: this.state.hireDate,
companyId: parseInt(sessionStorage.getItem("companyId")),
userType: "employee"
};
this.props.updateUser(editedEmployee, this.props.match.params.employeeId)
.then(() => this.props.history.push("/employees"))
}
render() {
const { open } = this.state;
return (
<div key={this.props.employee.id} className="empCard">
<div className="empCardBody">
<h3 className="empCardTitle">
{/* <img src={this.props.employee.image} alt={this.props.employee.name} className="empImg" /> */}
<p>{this.props.employee.name} {this.props.employee.surname}</p>
<p>{this.props.employee.email}</p>
<p>{this.props.employee.phone}</p>
<p>{this.props.employee.address}</p>
<p>{this.props.employee.city}, {this.props.employee.state} {this.props.employee.zip}</p>
<button className="btn btn-primary" onClick={this.onOpenModal}>Edit Employee</button>
{/* this.props.history.push(`/employees/${this.props.employee.id}/edit`)} >Edit Employee</button> */}
<br></br>
<button onClick={() => this.props.deleteEmp(this.props.employee.id)}
className="btn btn-danger">Fire Employee
</button>
</h3>
</div>
<div style={styles}>
<Modal open={open} onClose={this.onCloseModal} center>
<h2>Edit Employee Info</h2>
<form className="employeeForm">
<div className="form-group">
<label htmlFor="name">First Name</label>
<input
type="text"
required
className="form-control"
onChange={this.handleFieldChange}
id="name"
placeholder="First Name"
value={this.props.employee.name}
/>
<br></br>
答案 0 :(得分：1)
您快到了！您需要显示状态值！检查我作为//**FIX**:
export default class EmployeeCard extends Component {
state = {
open: false,
name: "",
surname: "",
email: "",
phone: "",
address: "",
city: "",
state: "",
zip: "",
image: "",
hireDate: ""
};
onOpenModal = () => {
// this.setState({ open: true });
return userAPImgr.getOneUser(this.props.match.params.employeeId)
.then(employee => {
this.setState({
name: employee.name,
surname: employee.surname,
email: employee.email,
phone: employee.phone,
address: employee.address,
city: employee.city,
state: employee.state,
zip: employee.zip,
hireDate: employee.hireDate,
open: true
});
})
}
onCloseModal = () => {
this.setState({ open: false });
};
handleFieldChange = evt => {
//const stateToChange = {}
//stateToChange[evt.target.id] = evt.target.value
//this.setState(stateToChange)
//**FIX**: you have to include other states that have not changed in the new state
const updatedState = {
...this.state, // This is called the spread operator
[evt.target.id] : evt.target.value
}
this.setState(updatedState)
}
updateEmployee = evt => {
evt.preventDefault()
// if (this.state.employee === "") {
// window.alert("Please select a caretaker");
// } else {
const editedEmployee = {
id: parseInt(this.props.match.params.employeeId),
name: this.state.name,
surname: this.state.surname,
email: this.state.email,
phone: this.state.phone,
address: this.state.address,
city: this.state.city,
state: this.state.state,
zip: this.state.zip,
hireDate: this.state.hireDate,
companyId: parseInt(sessionStorage.getItem("companyId")),
userType: "employee"
};
this.props.updateUser(editedEmployee, this.props.match.params.employeeId)
.then(() => this.props.history.push("/employees"))
}
render() {
const { open } = this.state;
return (
<div key={this.props.employee.id} className="empCard">
<div className="empCardBody">
<h3 className="empCardTitle">
{/* <img src={this.props.employee.image} alt={this.props.employee.name} className="empImg" /> */}
<p>{this.props.employee.name} {this.props.employee.surname}</p>
<p>{this.props.employee.email}</p>
<p>{this.props.employee.phone}</p>
<p>{this.props.employee.address}</p>
<p>{this.props.employee.city}, {this.props.employee.state} {this.props.employee.zip}</p>
<button className="btn btn-primary" onClick={this.onOpenModal}>Edit Employee</button>
{/* this.props.history.push(`/employees/${this.props.employee.id}/edit`)} >Edit Employee</button> */}
<br></br>
<button onClick={() => this.props.deleteEmp(this.props.employee.id)}
className="btn btn-danger">Fire Employee
</button>
</h3>
</div>
<div style={styles}>
<Modal open={open} onClose={this.onCloseModal} center>
<h2>Edit Employee Info</h2>
<form className="employeeForm">
<div className="form-group">
<label htmlFor="name">First Name</label>
<input
type="text"
required
className="form-control"
onChange={this.handleFieldChange}
id="name"
placeholder="First Name"
value={this.state.name}
//**FIX**: show value from state not props
/>
<br></br>