如何在Autocomplete组件达到数量上限后禁止添加新选项

你可以通过修改onChange的逻辑来实现需求：当新选中的chips数量超过10且是添加操作时，阻止更新字段值；如果是删除操作（数量减少），则允许正常更新。

修改后的代码 #

<Controller
  name={keyValue}
  control={control}
  defaultValue={defaultValue || []}
  disabled={disabled}
  render={({ field }) => (
    <Autocomplete
      freeSolo
      multiple
      options={options}
      renderInput={(params) => (
        <TextField
          variant="outlined"
          {...params}
          label={label}
          error={field.value?.length >= 10}
          helperText={field.value?.length >= 10 && "最多只能添加10个标签"}
        />
      )}
      {...field}
      value={field.value || []}
      onChange={(e, val) => {
        // 只有当新值长度≤10，或者是删除操作（新值比旧值短）时，才更新字段
        const currentLength = field.value?.length || 0;
        if (val.length <= 10 || val.length < currentLength) {
          field.onChange(val);
        }
      }}  
    />
  )}
/>

关键逻辑说明 #

• 对比新值val和当前字段值的长度：
  • 如果新值长度≤10：正常更新，不管是添加还是删除
  • 如果新值长度>10，但新值长度比当前值短（说明是删除操作）：允许更新
  • 如果新值长度>10且比当前值长（添加操作）：阻止更新，保持原有值

这样既实现了上限控制，又不影响删除已有的chips。另外把error的判断改成>=10，更贴合上限提示的场景。

内容的提问来源于stack exchange，提问作者inquisitivemongoose