React MUI 自动完成多个限制标签到适合的金额

Question

我有自动完成功能，可以从 React MUI 中选择多个选项。当失去焦点时，我希望它只显示适合一行的标签数量。我可以使用 limitTags={3} 来限制标签的数量。

但是有两个问题：

• 如果输入较短（在较小的屏幕上），我只需要显示 1 或 2 或根据自动完成的长度计算的其他数字。
• 如果所选选项标题太长，则仅显示一个。如果它们很短，则显示甚至可能超过 3 个。这应该根据显示的标签标题的长度来计算。

这可能吗？

我正在使用示例代码：

      <Autocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        limitTags={3}
        disableCloseOnSelect
        defaultValue={[top100Films[13]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
      />

Answer 1

为此目的，您拥有名为

renderTags

的属性。文档：https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-renderTags

你可以尝试这样的事情：

renderTags={(value: Value[]) => {
   // Your logic what to show in the input
   // you can use window.innerWidth to get the available size
   return value.map((o, i) => <Chip label={o.label} />);
}}