【发布时间】：2019-08-21 03:46:16
【问题描述】：
我有一个 React 员工管理应用程序。目前，除了编辑员工之外，我的所有 CRUD 操作都在工作。当您单击编辑按钮时，您将进入编辑表单屏幕，可以输入所有输入选项，并提交编辑表单。在编辑表单中，所有输入字段都以状态显示，但提交时，没有任何更新。 https://github.com/PaperPlanes1623/react-employees
App.js
import React, { Component } from 'react';
import Employees from './components/employee/Employees';
import EmployeeForm from './components/employee/EmployeeForm';
import index from './styles/index.scss';
class App extends Component {
state = {
employees: [
{ id: 1, firstName: 'Bob', lastName: 'Jones', email:
'bob@email.com', phone: '801-555-5555' },
{ id: 2, firstName: 'John', lastName: 'Doe', email:
'john@email.com', phone: '801-655-5555' },
{ id: 3, firstName: 'Mary', lastName: 'Jane', email:
'mary@email.com', phone: '801-755-5555' }
]
}
toggleEdit = () => this.setState({ editing: !this.state.editing });
editEmployee = (employeeData, id) => {
const employees = this.state.employees.map(employee => {
if (employee.id === employeeData.id)
return employeeData;
return employee
});
this.setState({ employees })
}
getId = () => {
// create unique id's
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
};
addEmployee = (employeeData) => {
let newEmployee = { id: this.getId(), ...employeeData }
this.setState({ employees: [newEmployee,
...this.state.employees] })
}
removeEmployee = (id) => {
const employees = this.state.employees.filter(employee => {
if (employee.id !== id)
return employee
})
this.setState({ employees: [...employees] })
}
render() {
const { employees } = this.state
return (
<>
<div class="head">
Employee Management System
</div>
<EmployeeForm add={this.addEmployee} update= .
{this.editEmployee} />
<div class="emp-header">
All Employees
</div>
<Employees employees={employees} remove= .
{this.removeEmployee} update={this.editEmployee} edit= .
{this.toggleEdit} />
</>
)
}
}
export default App;
EditForm.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class EditForm extends Component {
state = { firstName: '', lastName: '', phone: '', email: '' };
componentDidMount() {
if (this.props.id)
this.setState({
firstName: this.props.firstName, lastName:
this.props.lastName,
phone: this.props.phone, email: this.props.email
})
}
handleSubmit = (e) => {
e.preventDefault();
if (this.props.id) {
this.props.update(this.state, this.props.id)
} else {
this.props.add(this.state)
}
this.setState({ firstname: '', lastName: '', phone: '', email:
'' })
}
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
render() {
return (
<>
<h1><strong>Edit Employee</strong></h1>
<form onSubmit={this.handleSubmit}>
<input
placeholder="First Name"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="Last Name"
name="lastName"
value={this.state.lastName}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="phone"
name="phone"
value={this.state.phone}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="email"
name="email"
value={this.state.email}
onChange={this.handleChange}
/><br /><br />
<Link to='/'>
<input type="Submit" />
</Link>
</form>
</>
)
}
}
export default EditForm;
Main.js
import React, { Fragment } from 'react';
import { Route, Switch } from 'react-router-dom';
import App from './App';
import EditForm from './components/employee/EditForm';
const Main = () => (
<Fragment>
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/edit" component={EditForm} />
</Switch>
</Fragment>
)
export default Main;
预期结果：表单使用新输入值更新原始员工 实际结果：表单提交并重定向到主页，但没有任何反应。
【问题讨论】：
-
嗨 Dylan，检查更新的答案，如果有帮助，请告诉我。
标签： javascript reactjs forms state