React用户详情编辑实现：点击Update切换编辑状态的方法

步骤1：添加编辑相关状态 #

首先在组件的state里新增两个状态，用来跟踪当前编辑的用户和临时输入数据：

constructor(props) {
  super(props);
  this.state = {
    users: [], // 你的现有用户数组
    editingUserId: null, // 当前正在编辑的用户ID，初始为null
    editFormData: { name: '', email: '' } // 编辑时的临时输入值
  };
}

步骤2：实现编辑触发方法 #

完善beginEdit方法，把点击的用户ID和数据存入状态：

beginEdit(user) {
  this.setState({
    editingUserId: user._id,
    editFormData: {
      name: user.name,
      email: user.email
    }
  });
}

步骤3：在render中加入状态判断切换UI #

修改你的render方法，通过判断当前用户ID是否等于editingUserId来切换展示/编辑状态：

render() {
  return (
    <div className="App">
      {this.state.users.map((u) => {
        // 判断当前条目是否处于编辑状态
        const isEditing = u._id === this.state.editingUserId;
        
        return (
          <React.Fragment key={u._id}>
            <div className="box">
              {isEditing ? (
                // 编辑状态：渲染文本框
                <>
                  <input
                    type="text"
                    value={this.state.editFormData.name}
                    onChange={(e) => this.handleEditChange('name', e.target.value)}
                  />
                  <input
                    type="email"
                    value={this.state.editFormData.email}
                    onChange={(e) => this.handleEditChange('email', e.target.value)}
                  />
                  {/* 确认更新按钮 */}
                  <button onClick={() => this.confirmEdit(u._id)}>确认</button>
                  {/* 取消编辑按钮 */}
                  <button onClick={() => this.cancelEdit()}>取消</button>
                </>
              ) : (
                // 展示状态：渲染文本和操作按钮
                <>
                  <h3>{u.name}</h3>
                  <h4>{u.email}</h4>
                  <button onClick={() => this.beginEdit(u)}>Update</button>
                  <button onClick={() => this.deleteUser(u)}>Delete</button>
                </>
              )}
            </div>
          </React.Fragment>
        );
      })}
      {this.renderAddUser()}
    </div>
  );
}

步骤4：补充编辑相关辅助方法 #

还需要实现几个辅助方法来处理输入变化、确认更新和取消编辑：

// 处理编辑输入框的内容变化
handleEditChange(field, value) {
  this.setState(prevState => ({
    editFormData: {
      ...prevState.editFormData,
      [field]: value
    }
  }));
}

// 确认更新用户数据
confirmEdit(userId) {
  const updatedUsers = this.state.users.map(user => {
    if (user._id === userId) {
      return { ...user, ...this.state.editFormData };
    }
    return user;
  });
  
  this.setState({
    users: updatedUsers,
    editingUserId: null // 退出编辑状态
  });
  
  // 如果需要调用后端接口更新数据，可以在这里添加请求逻辑
}

// 取消编辑，重置状态
cancelEdit() {
  this.setState({
    editingUserId: null,
    editFormData: { name: '', email: '' }
  });
}

// 删除用户的方法（如果还没完善）
deleteUser(user) {
  const updatedUsers = this.state.users.filter(u => u._id !== user._id);
  this.setState({ users: updatedUsers });
  // 同样，这里可以添加后端删除请求逻辑
}

这样就能实现点击Update按钮后，对应条目切换为编辑状态，显示文本框和确认/取消按钮，点击确认后更新用户数据，点击取消则回到展示状态；Delete按钮也能正常删除对应条目。

内容的提问来源于stack exchange，提问作者user20423412