Material-UI：如何renderValue显示select标签的标签

Question

我正在使用 MUI 的多重选择组件，当用户选择时，它向用户显示选择标签的值，但我希望它显示选择标签的标签。

这是codesandbox链接

https://codesandbox.io/embed/elated-bose-phh8xx?fontsize=14&hidenavigation=1&theme=dark

Answer 1

我发现的一个技巧是，您可以在Chip Lable中调用find方法并通过 id 获取该对象，然后使用其标签

\n

示例代码：

\n

 <Chip key={value} label={DUMMY_DATA.find(item => item.id === value).label} variant="light" color="primary" size="small" />\n

\n

阅读有关 find 方法的更多信息

\n

完整代码：

\n

<FormControl fullWidth>\n  <InputLabel id="demo-multiple-chip-label">Chuy\xc3\xaan m\xe1\xbb\xa5c</InputLabel>\n  <Select\n    labelId="demo-multiple-chip-label"\n    id="demo-multiple-chip"\n    multiple\n    value={personName}\n    onChange={handleChange}\n    input={<OutlinedInput id="select-multiple-chip" label="Chuy\xc3\xaan m\xe1\xbb\xa5c" />}\n    renderValue={(selected) => (\n      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>\n        {selected.map((value) => (\n          <Chip\n            key={value}\n            label={DUMMY_DATA.find((item) => item.id === value).label}\n            variant="light"\n            color="primary"\n            size="small"\n          />\n        ))}\n      </Box>\n    )}\n    MenuProps={MenuProps}\n  >\n    {DUMMY_DATA.map((o) => (\n      <MenuItem key={o.id} value={o.id}>\n        {o.label}\n      </MenuItem>\n    ))}\n  </Select>\n</FormControl>;\n

\n