【React全家桶入门之八】用户编辑与删除

最新推荐文章于 2024-08-22 15:11:22 发布

一韬

最新推荐文章于 2024-08-22 15:11:22 发布

阅读量1w

点赞数 5

分类专栏： React全家桶入门 react 重构 React全家桶入门文章标签： react

本文链接：https://blog.csdn.net/awaw00/article/details/54890439

版权

本文介绍如何在React应用中实现用户编辑和删除功能。首先在用户列表增加操作列，添加编辑和删除按钮。用户删除通过弹窗确认避免误删。用户编辑则复用添加代码，通过升级formProvider，创建通用组件UserEditor，根据props区分添加和编辑行为，同时添加UserEditPage处理编辑页面逻辑。最后完善handleEdit方法，完成用户编辑跳转。

摘要由CSDN通过智能技术生成

前文中实现了用户添加与用户列表展示的功能，本篇带大家来完成用户的编辑与删除。

添加操作列

编辑与删除功能都是针对已存在的某一个用户执行的操作，所以在用户列表中需要再加一个“操作”列来展现【编辑】与【删除】这两个按钮。

修改/src/pages/UserList.js文件，添加方法handleEdit与handleDel，并在table中添加一列：

...
class UserList extends React.Component {
  constructor (props) { ... }

  componentWillMount () { ... }

  handleEdit (user) {

  }

  handleDel (user) {

  }

  render () {
    const {userList} = this.state;

    return (
      <HomeLayout title="用户列表">
        <table>
          <thead>
          <tr>
            <th>用户ID</th>
            <th>用户名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
          </thead>

          <tbody>
          {
            userList.map((user) => {
              return (
                <tr key={user.id}>
                  <td>{user.id}</td>
                  <td>{user.name}</td>
                  <td>{user.gender}</td>
                  <td>{user.age}</td>
                  <td>
                    <a href="javascript:void(0)" onClick={() => this.handleEdit(user)}>编辑</a>
                    &nbsp;
                    <