javascript - 将选项作为对象数组的多项选择

问题描述

我有以下用于选择角色的组件：

export const MultipleSelectChip = ({
  options,
  label,
  error,
  onRolesUpdate,
}: Props) => {
  const theme = useTheme();
  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);

  const handleChipChange = (
    event: SelectChangeEvent<typeof selectedOptions>,
  ) => {
    const {
      target: { value },
    } = event;
    setSelectedOptions(
      // On autofill we get a the stringified value.
      typeof value === 'string' ? value.split(',') : value,
    );
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="multiple-chip-label">{label}</InputLabel>
        <Select
          required
          labelId="multiple-chip-label"
          error={error}
          id="demo-multiple-chip"
          multiple
          value={selectedOptions}
          onChange={handleChipChange}
          input={<OutlinedInput id="select-multiple-chip" label={label} />}
          renderValue={(selected) => (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {selected.map((value) => (
                <Chip key={value} label={value} />
              ))}
            </Box>
          )}
          MenuProps={MenuProps}
        >
          {options.map((propOption) => (
            <MenuItem
              key={propOption.id}
              value={propOption.name}
              style={getStyles(propOption, selectedOptions, theme)}
            >
              {propOption.name}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>Here's my helper text</FormHelperText>
      </FormControl>
    </div>
  );
};

对于选项，我有一个带有 id 和名称的对象数组，事情是我想使用名称来显示芯片和 id 将它们传递给父组件以进行添加请求。我也不知道如何获得de id。

这是示例：https ://codesandbox.io/s/6ry5y?file=/demo.tsx但使用的是字符串数组而不是对象数组。

这就是“选项”的样子：

const rolesDummy: Role[] = [
    { id: '61fb0f25-34aa-46c6-8683-093254223dcd', name: 'HR' },
    { id: '949b9b1e-d3f8-45cb-a061-08da483bd486', name: 'Interviewer' },
    { id: 'c09ae2d4-1335-4ef0-8d4b-ee9529796b52', name: 'Hiring Manager' },
  ];

我只需要取回选定的 ID

谢谢！

标签： javascriptreactjsmaterial-ui

解决方案

如果您将选项作为对象传递，则可以MenuItem使用option.idas akey和 theoption.name作为标签来渲染每个选项。由MenuItemid 标识：

<Select {...}>
  {options.map((option) => (
    <MenuItem key={option.id} value={option.id}>
      {option.name}
    </MenuItem>
  ))}
</Select>

在选定的中显示名称Chip。使用renderValue，但它只为您提供选定的值（数组option.id），因此您需要找到获取名称的选项：

renderValue={(selected) => {
  return (
    <Box>
      {selected.map((value) => {
        const option = options.find((o) => o.id === value);
        return <Chip key={value} label={option.name} />;
      })}
    </Box>
  );
}}

现在，您可以通过添加处理程序来获取一组选定的 id change：

onChange={e => console.log(e.target.value)}

javascript - 将选项作为对象数组的多项选择

问题描述

解决方案

推荐阅读