javascript - 编辑表格不更新
问题描述
我有一个 React 员工管理应用程序。目前,除了编辑员工之外,我的所有 CRUD 操作都在工作。当您单击编辑按钮时,您将进入编辑表单屏幕,可以输入所有输入选项,并提交编辑表单。在编辑表单中,所有输入字段都显示为状态,但提交时,没有任何更新。 https://github.com/PaperPlanes1623/react-employees
应用程序.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;
主.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;
预期结果:表单使用新输入值更新原始员工实际结果:表单提交并重定向到主页,但没有任何反应。
解决方案
我觉得问题是这样的
<Link to='/'>
<input type="Submit" />
</Link>
您正在包装您的input
with Link
,因此无论何时单击它都会直接导航到路径/
而不执行您的handleSubmit
功能。
你应该只有,
<input type="Submit" /> //Without wrapping with Link
注意:提交表单后,如果你想重定向到你的主页,你可以使用Redirect
from react-route-dom
package。
import { Redirect } from 'react-router-dom'
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: '' })
return <Redirect to="/" /> //Here you can redirect
}
只需将您的文件替换为以下内容,
应用程序.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' }
],
updatedEmployee: '',
}
toggleEdit = () => this.setState({ editing: !this.state.editing });
editEmployee = (employeeData) => {
const employees = this.state.employees.map(employee => {
if (employee.id === employeeData.id)
return employeeData;
return employee
});
this.setState({ employees })
}
updateEmployee = (id) => {
const employees = this.state.employees.filter(employee => employee.id === id);
this.setState({ updatedEmployee: employees[0] })
}
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 } updatedEmployee = { this.state.updatedEmployee }
/> <
div class = "emp-header" >
All Employees <
/div> <
Employees employees = { employees } remove = { this.removeEmployee } update = { this.updateEmployee } edit = { this.toggleEdit }
/> <
/>
)
}
}
export default App;
员工.js
import React from 'react';
import { Link } from 'react-router-dom';
const Employee = ({ id, firstName, lastName, email, phone, remove, edit, update }) => (
<tr id={id}>
<td>{id}</td>
<td>{firstName}</td>
<td>{lastName}</td>
<td>{email}</td>
<td>{phone}</td>
<td>
<button class="delete-btn" onClick={() => remove(id)}>
<strong>Delete</strong>
</button>
<button class="edit-btn" onClick={() => update(id)}>
<strong>Edit</strong>
</button>
</td>
</tr>
)
export default Employee;
员工.js
import React from 'react';
import { Table } from 'semantic-ui-react';
import Employee from './Employee';
const Employees = ({ employees, remove, edit, update }) => (
<div class="table">
<Table celled padded>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Employee ID</Table.HeaderCell>
<Table.HeaderCell>First Name</Table.HeaderCell>
<Table.HeaderCell>Last Name</Table.HeaderCell>
<Table.HeaderCell>Email</Table.HeaderCell>
<Table.HeaderCell>Phone</Table.HeaderCell>
<Table.HeaderCell>Options</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
employees.map(employee => (
<Employee key={employee.id} {...employee} remove={remove} edit={edit} update={update}/>
))
}
</Table.Body>
</Table>
</div>
)
export default Employees;
EmployeeForm.js
import React, { Component } from 'react';
import { Form, Divider } from 'semantic-ui-react';
class EmployeeForm extends Component {
state = {
id: this.props.updatedEmployee.id,
firstName: this.props.updatedEmployee.firstName,
lastName: this.props.updatedEmployee.lastName,
email: this.props.updatedEmployee.email,
phone: this.props.updatedEmployee.phone
}
handleChange = (e) => {
const { name, value } = e.target
this.setState({ [name]: value })
}
handleSubmit = (e) => {
e.preventDefault();
//call add function
if (this.props.updatedEmployee.id) {
this.props.update(this.state)
}else{
this.props.add(this.state)
}
//clear out form
this.setState({ id: '', firstName: '', lastName: '', email: '', phone: '' })
}
componentDidUpdate(nextProps){
if(nextProps.updatedEmployee.email !== this.props.updatedEmployee.email){
this.setState({
id: this.props.updatedEmployee.id,
firstName: this.props.updatedEmployee.firstName,
lastName: this.props.updatedEmployee.lastName,
email: this.props.updatedEmployee.email,
phone: this.props.updatedEmployee.phone
})
}
}
render() {
const { firstName, lastName, phone, email } = this.state;
return (
<div class="form">
<form onSubmit={this.handleSubmit}>
<div class="form-head">
<Divider horizontal>New Employee</Divider>
</div>
<input
placeholder="First Name"
required
name="firstName"
value={firstName}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="Last Name"
required
name="lastName"
value={lastName}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="E-Mail"
required
name="email"
value={email}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="Phone Number"
required
name="phone"
value={phone}
onChange={this.handleChange}
/><br /><br />
<button class="submit-btn"><strong>Submit</strong></button>
<br />
</form>
</div>
)
}
}
export default EmployeeForm;
推荐阅读
- javascript - 从 JSON 中选择
- python - 如何在python中制作标签查找器?
- proxy - Wget 失败 - 服务不可用无法建立 SSL 连接
- reactjs - 使用 express 在代码和框中创建 React 应用程序打字稿
- java - 在 Azure DevOps 中,将应用程序部署到 Functions 时如何正常重启
- java - 如何去掉不重要的节点?
- nextflow - 在 Nextflow 中获取两个输出文件时出现问题
- python - 如何使用 for 循环/范围来结束 Python 中的特定字符输入?
- blockchain - 智能合约没有产生结果,我如何查看两个结果或获得两个结果的总数
- javascript - TypeScript 找不到名称“SpeechGrammarList”,在“DOM”中实现