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

**八、用户选择器与项目编辑功能**

在上一篇文章中，我们已经完成了项目列表的展示和删除功能。现在，我们需要实现用户选择器和项目编辑功能，这是Jira类似产品的一个重要组成部分。

###1. 用户选择器用户选择器允许用户从一个列表中选择多个用户作为项目成员。我们将使用React Hook中的`useState`和`useEffect`来实现这个功能。

首先，我们需要定义一个状态变量来存储选中的用户：

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

const [selectedUsers, setSelectedUsers] = useState([]);

typescriptconst handleSelectUser = (user) => {
 const index = selectedUsers.indexOf(user);
 if (index !== -1) {
 setSelectedUsers((prevSelectedUsers) =>
 prevSelectedUsers.filter((selectedUser) => selectedUser !== user)
 );
 } else {
 setSelectedUsers((prevSelectedUsers) => [...prevSelectedUsers, user]);
 }
};

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

 // ...

 return (
 <div>
 {/* ... */}
 <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>
 );
};

typescriptconst [editingProject, setEditingProject] = useState(null);

typescriptconst handleEditProject = (project) => {
 setEditingProject(project);
};

typescriptconst ProjectList = () => {
 const [projects, setProjects] = useState([]);
 const [editingProject, setEditingProject] = useState(null);

 // ...

 return (
 <div>
 {/* ... */}
 {project.map((p) => (
 <li key={p.id}>
 <button onClick={() => handleEditProject(p)}>编辑</button>
 {/* ... */}
 </li>
 ))}
 </div>
 );
};

typescriptconst ProjectList = () => {
 const [projects, setProjects] = useState([]);
 const [editingProject, setEditingProject] = useState(null);

 // ...

 if (editingProject) {
 return (
 <div>
 {/* ... */}
 <form>
 <label>
 名称:
 <input type="text" value={editingProject.name} onChange={(e) => handleUpdateName(e.target.value)} />
 </label>
 

 <label>
 描述:
 <textarea value={editingProject.description} onChange={(e) => handleUpdateDescription(e.target.value)} />
 </label>
 

 <button type="submit">保存</button>
 </form>
 </div>
 );
 }

 // ...
};