小编doc*_*cid的帖子

如何限制 Material UI 实验室自动完成组件中可以选择的最大选项数

(例如)我希望限制用户在我的自动完成组件中仅选择 3 个选项,并在 TAG 数组的长度达到 3 时禁用这些选项。问题是 api 中没有 limitMaxNumberOfTags 选项,我无法找到任何方法访问 Selected 标签数组{除了 limitTags,它只限制可见标签}。类似的事情可能会有所帮助 getOptionDisabled={(options, tags) => (tags.length > 3 ? true : false)} 。这是到目前为止我的自动完成实现

<Autocomplete
  multiple
  id="tags-outlined"
  options={students}
  getOptionLabel={(option) => option.personalInfo.firstName + ' ' + option.personalInfo.lastName}
  defaultValue={[...added]}
  onChange={(e, newVal) => setAdded([...newVal])}
  renderOption={(option, state) => {
    return (
      <Chip
        icon={
          <FaceIcon /> /*<Avatar color="primary" variant='outlined' size="small" className={classes.small}></Avatar>*/
        }
        label={option.personalInfo.firstName + ' ' + option.personalInfo.lastName}
        color="default"
        variant="outlined"
        {...state}
      />
    );
  }}
  renderTags={(options, getTagProps) =>
    options.map((option) => (
      <Chip
        icon={
          <FaceIcon /> …
Run Code Online (Sandbox Code Playgroud)

autocomplete reactjs material-design material-ui

6
推荐指数
1
解决办法
1万
查看次数