Material-UI 自动完成渲染值

Question

我有一个 ReactJs 应用程序，它使用 Material-UI 自动完成组件，具有多个值和复选框，完全像他们的代码片段：

<Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      disableCloseOnSelect
      getOptionLabel={(option) => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
      )}
    />

检查值后，该值将呈现在带有“X”按钮的芯片中，如下所示：

如何更改 props 以便呈现的值显示为“Value A, Value B, "Value C”，中间有逗号且没有其他样式？

感谢您的宝贵时间

Answer 1

提供自动完成 RenderTags 道具：

Signature:

function(value: T[], getTagProps: function) => ReactNode
value: The value provided to the component.
getTagProps: A tag props getter.

你的情况：

renderTags={(values) => 
  values
  .map(value => value.title)
  .join(', ')
}

Material-UI 自动完成渲染值

Material-UI Autocomplete rendered values

reactjs

autocomplete

material-ui