如何在 React 中管理多个 Select 组件的状态

Question

我正在尝试创建一个时间表，可以使用 React Select 组件将员工分配到不同的日子。但是，我不确定如何像目前一样单独管理它们的每个状态，当我更改一个选项时它们都具有相同的值。任何形式的指导将不胜感激。我应该分别跟踪每个州吗？那样不会很麻烦吗？

这是我的表组件：

import React from "react";
import Select from "react-select";
import { useState } from "react";

const options = [
  { value: "None", label: "None" },
  { value: "X1", label: "X1" },
  { value: "X2", label: "X2" },
  { value: "X3", label: "X3" },
  { value: "X4", label: "X4" },
  { value: "X5", label: "X5" },
  { value: "X6", label: "X6" },
];

const headers = ["", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
const columns = [
  "Morning Up Stairs",
  "Morning Down Stairs",
  "Morning Parking Lot",
  "Lunch A",
  "Lunch B",
  "Lunch C",
  "Lunch D",
  "Afternoon Up Stairs",
  "Afternoon Down Stairs",
  "Afternoon Parking Lot",
];

const Scheduler = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleSelectChange = (selectedOption, rowId, header, colName) => {
    setSelectedOption(selectedOption)
    console.log(`Selected option: ${selectedOption.value}`);
    console.log(`Row ID: ${rowId}`);
    console.log(`Column name: ${colName}`);
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            {headers.map((header) => (
              <th key={header}>{header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {columns.map((colName, index) => (
            <tr key={index}>
              <td>{colName}</td>
              {headers.map(
                (header, index) =>
                  index > 0 && (
                    <td key={index}>
                      <Select
                        options={options}
                        value={selectedOption}
                        onChange={(selectedOption) =>
                          handleSelectChange(
                            selectedOption,
                            index,
                            header,
                            colName
                          )
                        }
                      />
                    </td>
                  )
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

这是目前的样子：

Answer 1

<select></select>

我在 HTML 中做了一个新的选择空输入。