【实战】 八、用户选择器与项目编辑功能(上) —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（十四）

**八、用户选择器与项目编辑功能(上)**在前面的章节中，我们已经完成了项目列表的展示和基本操作。然而，在实际的项目管理系统中，用户选择器和项目编辑功能是必不可少的。今天，我们将重点介绍如何实现这些功能。

###1. 用户选择器用户选择器（User Picker）用于在项目中选择特定的人员或团队成员。在 Jira 中，这个功能非常重要，因为它允许项目负责人轻松地邀请其他成员参与项目。

#### 实现步骤：

1. **创建 UserPicker 组件**：首先，我们需要创建一个 UserPicker 组件来展示用户列表。我们可以使用 React Hook 的 `useState` 和 `useEffect` 来实现这个功能。

typescriptimport React, { useState, useEffect } from 'react';

const UserPicker = () => {
 const [users, setUsers] = useState([]);
 const [selectedUsers, setSelectedUsers] = useState([]);

 useEffect(() => {
 // 从 API 获取用户列表 fetch('/api/users')
 .then(response => response.json())
 .then(data => setUsers(data));
 }, []);

 const handleSelectUser = (user) => {
 if (!selectedUsers.includes(user)) {
 setSelectedUsers([...selectedUsers, user]);
 }
 };

 return (
 <div>
 <h2>用户选择器</h2>
 <ul>
 {users.map((user) => (
 <li key={user.id}>
 <input type="checkbox"
 checked={selectedUsers.includes(user)}
 onChange={() => handleSelectUser(user)}
 />
 <span>{user.name}</span>
 </li>
 ))}
 </ul>
 </div>
 );
};

2. **集成 UserPicker 组件**：接下来，我们需要将 UserPicker 组件集成到项目编辑页面中。我们可以使用 React Hook 的 `useState` 和 `useEffect` 来实现这个功能。

typescriptimport React, { useState, useEffect } from 'react';
import UserPicker from './UserPicker';

const ProjectEdit = () => {
 const [project, setProject] = useState({
 title: '',
 description: '',
 users: [],
 });

 useEffect(() => {
 // 从 API 获取项目信息 fetch('/api/projects')
 .then(response => response.json())
 .then(data => setProject(data));
 }, []);

 const handleSaveProject = () => {
 //保存项目信息 fetch('/api/projects', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(project),
 })
 .then(response => response.json())
 .then(data => console.log(data));
 };

 return (
 <div>
 <h2>项目编辑</h2>
 <form onSubmit={handleSaveProject}>
 <input type="text"
 value={project.title}
 onChange={(e) => setProject({ ...project, title: e.target.value })}
 placeholder="标题"
 />
 <textarea value={project.description}
 onChange={(e) => setProject({ ...project, description: e.target.value })}
 placeholder="描述"
 />
 <UserPicker users={project.users} onSelectUser={handleSelectUser} />
 <button type="submit">保存</button>
 </form>
 </div>
 );
};

###2.项目编辑功能项目编辑功能（Project Edit）用于修改项目的基本信息。在 Jira 中，这个功能非常重要，因为它允许项目负责人轻松地更新项目的标题、描述等信息。

#### 实现步骤：

1. **创建 ProjectEdit 组件**：首先，我们需要创建一个 ProjectEdit 组件来展示项目编辑页面。我们可以使用 React Hook 的 `useState` 和 `useEffect` 来实现这个功能。

typescriptimport React, { useState, useEffect } from 'react';

const ProjectEdit = () => {
 const [project, setProject] = useState({
 title: '',
 description: '',
 users: [],
 });

 useEffect(() => {
 // 从 API 获取项目信息 fetch('/api/projects')
 .then(response => response.json())
 .then(data => setProject(data));
 }, []);

 const handleSaveProject = () => {
 //保存项目信息 fetch('/api/projects', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(project),
 })
 .then(response => response.json())
 .then(data => console.log(data));
 };

 return (
 <div>
 <h2>项目编辑</h2>
 <form onSubmit={handleSaveProject}>
 <input type="text"
 value={project.title}
 onChange={(e) => setProject({ ...project, title: e.target.value })}
 placeholder="标题"
 />
 <textarea value={project.description}
 onChange={(e) => setProject({ ...project, description: e.target.value })}
 placeholder="描述"
 />
 <button type="submit">保存</button>
 </form>
 </div>
 );
};

2. **集成 ProjectEdit 组件**：接下来，我们需要将 ProjectEdit 组件集成到项目列表页面中。我们可以使用 React Hook 的 `useState` 和 `useEffect` 来实现这个功能。

typescriptimport React, { useState, useEffect } from 'react';
import ProjectEdit from './ProjectEdit';

const ProjectList = () => {
 const [projects, setProjects] = useState([]);

 useEffect(() => {
 // 从 API 获取项目列表 fetch('/api/projects')
 .then(response => response.json())
 .then(data => setProjects(data));
 }, []);

 const handleEditProject = (project) => {
 // 编辑项目信息 setProjects([...projects, project]);
 };

 return (
 <div>
 <h2>项目列表</h2>
 <ul>
 {projects.map((project) => (
 <li key={project.id}>
 <span>{project.title}</span>
 <button onClick={() => handleEditProject(project)}>编辑</button>
 </li>
 ))}
 </ul>
 </div>
 );
};

以上就是本篇文章的全部内容。通过阅读这篇文章，希望你能够了解如何在 React 应用中实现用户选择器和项目编辑功能。