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

我想创建一个新表，该表由以前从下拉菜单Material UI中选择的选项组成。因为我对反应和材料UI还不熟悉，所以我不知道该怎么做

已经有一个包含包含下拉列表的列的表。此下拉列表允许选择多个选项

组件表输入：

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>
  )
}

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>
  )
}

TableInput中使用的组件ExamInput：

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>
  )
}

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>
  )
}

此外，我还创建了一个超级简单的图像，展示了整个事物的外观

非常感谢