如何从下拉菜单中添加和显示多个项目并将数组存储在反应中

Question

下拉菜单将包含将分配给执行特定任务的用户列表，那么如何使用 React JS 动态添加和显示这些用户

Answer 1

根据你的要求，我的观点还很模糊，我可以提出以下解决方案：

const {useState} = React;

const tasksInitialData = [
  {
    taskId: 1,
    taskName: "Task 1",
    taskDescription: "Task 1 description",
    assignedUsers: [],
  },
  {
    taskId: 2,
    taskName: "Task 2",
    taskDescription: "Task 2 description",
    assignedUsers: [],
  }
]

const users = [
  {
    userId: 11,
    userFirstName: "John",
    userLastName: "Smith",
    username: "Johnny",
  },
    {
    userId: 22,
    userFirstName: "Peter",
    userLastName: "Peterson",
    username: "pp123",
  },
    {
    userId: 33,
    userFirstName: "Nick",
    userLastName: "Nickolson",
    username: "user-nick",
  }
]

const App = () => {
  const [tasks, setTasks] = React.useState(tasksInitialData);
  
  // method checks does a given user (item) already exists in tasks.assignedUsers (collection)
  // it is written so it is fairly generic
  function isUserAlreadyAssigned(item, collection, propertyName) {
    return collection.filter(collectionItem => collectionItem[propertyName] === item[propertyName]).length
  }
    
  function handleAssignUser(taskId, user){
    setTasks(tasks.map(task => {
      if(task.taskId !== taskId) return task
      else {
        return {
          ...task,
          assignedUsers: [
            ...task.assignedUsers,
            user
          ]
        }
      }
    }))
  }
  
  return(
    <div>
      {tasks.map(task => {
        const usersAvailableForTask = users.filter(user => !isUserAlreadyAssigned(user, task.assignedUsers, 'userId'));
        return <div style={{padding: 10, margin: 10, backgroundColor: '#b7bac7'}}>
              {task.taskName}<br/>
              Users assigned for this task: {task.assignedUsers.map(assignedUser => `${assignedUser.userFirstName} ${assignedUser.userLastName} `)}<br/>
              Assign users for this task:<br/>
              <select name="users" id="user">
                  <option value="">--Please choose a user for this task--</option>
                  {usersAvailableForTask.map(user => <option value={user.userId} onClick={() => handleAssignUser(task.taskId, user)}>{`${user.userFirstName} ${user.userLastName}`}</option>)}
              </select>
          </div>})}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("app"));

想法是你有一个任务列表（tasksInitialData）（你将从后端获得），每个任务都有一个分配给它的用户列表（在本例中是一个空数组，但是一般可以是pre-filled).

然后您有一个用户列表 (users) - 假设该列表是自主的，这意味着它不依赖于任务。每个任务都会显示此列表。一旦您 select 成为给定任务的用户，他就会从该任务的 selection 中省略。

请记住，这是解决方案的 MVP，可以通过多种方式进行改进。可能的改进之一：

将任务卡移动到它自己的组件
删除硬编码数据（添加从后端获取）
使用useMemo

您可以查看工作示例 here。

Answer 2

我已经安装了react-select包来解决这个问题

如何从下拉菜单中添加和显示多个项目并将数组存储在反应中

How to add and display multiple items from dropdown menu and store an array in react

reactjs

dropdown