时间戳

首页 > 解决方案 > 在反应中更新用户信息

reactjs - 在反应中更新用户信息

问题描述

我正在 React 中做一个示例 crud 应用程序。我有一个 AddUser 组件和 User 组件。所有用户详细信息都存储在 UserComponent 中（即我将详细信息存储在状态中）。

我需要更新现有用户（即，当我单击编辑按钮时，详细信息应显示在 AddUser 组件的文本框中，并且当我在进行更改后单击提交时，这些将保存在用户状态）。我找到了一种将用户详细信息从用户组件传递到 AddUser 组件（即使用道具）的方法。

如何在 AddUser 组件的文本字段中显示用户的详细信息？以下代码位于 AddUser 组件的 render 方法中。

<div>
  <form id="theForm" >
    <div class="form-group">
      <label >Name</label>
      <input type="text" class="form-control" name='name' aria-describedby="nameHelp" onChange={this.handleChange} value={user.name} placeholder="Enter Name" />
    </div>
    <div class="form-group">
      <label >Age</label>
      <input type="text" class="form-control" name="age" aria-describedby="ageHelp" onChange={this.handleChange} value={user.age} placeholder="Enter Age" />
    </div>
    <div class="form-group">
      <label >Address</label>
      <input type="text" class="form-control" name="address" aria-describedby="addressHelp" onChange={this.handleChange} value={user.address} placeholder="Enter Address" />
    </div>
    <div class="form-group">
      <button type="button" class="btn btn-primary" onClick={this.handleSubmit}>Submit</button>
    </div>
  </form>
</div>

以下代码在用户组件的渲染方法中。

<div>
  <h1 align="center">Crud Application</h1>
  <table class="table">
    <thead>
      <tr>
        <th> Name  </th>
        <th> Age   </th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      {userlist}
    </tbody>
  </table>
  <AddUser AddUser={this.AddUser} edituser={this.state.users}/>
</div>

标签： reactjs

解决方案

您的问题有一个简单的解决方案。

AddUser 组件必须将所选用户作为 editUser。在选择要编辑的用户时显示用户列表的表中，有一个状态变量，它保存当前选定的用户。

将该数据传递给 AddUser，出于可读性目的，可以将其更改为 AddEditUser。

用户页面.jsx

import React, {useState} from 'react'
import AddEditUser from './AddEditUser'
import UserList from './UserList'

const [userList,setUserList] = useState([])
const [currentUser,setCurrentUser] = useState()

const updateList = (data, editFlag) => {
  let newList = [...userList]
  if(editFlag) {
    newList = userList.filter(item => item.id !== data.id).concat([data])
  } else {
    newList = userList.concat([data])
  }
  setUserList(newList)
}
return (
  <>
    <UserList userList={userList} setCurrentUser={setCurrentUser} />
    <AddEditUser user={currentUser} updateUserList={updateUserList} />
  </>
)

这是一个您可以使用的简单示例。根据您的用例，您可以修改您更改的内容、更新方式等。

推荐阅读