如何使用下拉菜单中的选定选项创建新表？

Question

我想创建一个新表，该表由下拉菜单（Material-UI）中先前选择的选项组成。由于我是React和Material-UI的新手，所以我不知道该怎么做。

已经有一个表格，其中包含一个包含下拉列表的列。此下拉菜单允许选择多个选项。

Component TableInput：

function TableInput() {

  return (
    <div>
      {/* First table with the multiselect-dropdown */}
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell align="right">Examns</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell align="right">
                <ExamInput />
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Paper>

      {/* Second table that should be rendered according to the selected options in the first table */}
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell align="right">Exam</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell component="th" scope="row">
                {/* Here the selected options from the first table should be listed */}
                {/* for example. "Master, Bachelor, PhD" */}

              </TableCell>
              <TableCell align="right">
                {/* Here, another multiselect-dropdown should appear according to the rendered option in the first column
                It is used to select the achieved score in the examn 
                Each examn has a predefined list of score options.*/}
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Paper>
    </div>
  )
}

ExamnInput组件（在TableInput中使用）：

function ExamInput() {

  const names = ['Abitur', 'Mittlere Reife', 'Master', 'Bachelor']

  const [examn, setExamn] = React.useState<string[]>([])

  function handleChange(event: React.ChangeEvent<{ value: unknown }>) {
    setExamn(event.target.value as string[])
  }

  return (
    <Paper>
      <FormControl>
        <InputLabel htmlFor="select-multiple">Exams</InputLabel>
        <Select
          multiple
          value={examn}
          onChange={handleChange}
          input={<Input id="select-multiple" />}
        >
          {names.map(name => (
            <MenuItem
              key={name}
              value={name}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Paper>
  )
}

此外，我还创建了一个超级简单的图像，显​​示了整个外观。

非常感谢！