Блог

В настоящее время я создаю таблицу, в которой в каждой строке есть несколько вариантов выбора. Я хочу, чтобы в таблице было несколько уникальных вариантов выбора для каждой строки, где при щелчке откроется выпадающее меню, а предустановленные варианты будут основаны на данных SQL.

Это текущий код, с которым я работаю, но при каждом изменении он изменяет каждый множественный выбор в таблице, а не только один:

    const [names, setNames] = useState([]);

   const handleChange = (event) => {
       setNames(event.target.value)
     }
       ...    

   <TableCell align="center" className={classes.tableCell} key={1}>
              <FormControl>
                <Select
                  labelId="group-device-menu-label"
                  id="group-device-menu"
                  value={names}
                  multiple
                  onChange={handleChange}
                  MenuProps={MenuProps}
                  input={<Input />}
                  renderValue={(selected) => selected.join(', ')}
                  onOpen={() => {handleClick(index)}}
                  onClose={handleClose}
                >
                  <MenuItem>Select Names</MenuItem>
                  {nameData.map((name, index) => {
                    return (
                      <MenuItem key={index} value={name.firstname}>
                        <Checkbox checked={names.indexOf(name.firstname) > -1} />
                        <ListItemText primary={name.firstname} />
                      </MenuItem>
                    )
                  })}
                </Select>
              </FormControl>
            </TableCell>
 

Это столбец с множественным выбором. У меня есть два основных вопроса: Как мне сделать так, чтобы в пользовательском интерфейсе material были заданные параметры? Как я могу сделать уникальный множественный выбор, чтобы при изменении только этой конкретной строки изменялась? Спасибо!