反应材料自动完成：防止选项删除某些选定项目

Question

我有一个

Autocomplete

，我可以在其中预选一些值。

工作正常。

我的要求是不允许用户从自动完成中删除预选选项。

提及

getOptionsDisabled

选项可能会有所帮助，但这是为了使项目不可选择。

但我的要求是禁用已选择的项目，以便用户无法取消选择/删除它。

我可以通过对

onChange

事件或任何其他事件执行一些解决方法来实现它，以防止用户在按下删除键时删除它，但这不是那么用户友好，而且通过快速查看自动完成也不是那么清楚.

禁用的选项让事情立即变得清晰。

我在任何地方都找不到任何帮助来实现这一目标。

有什么办法可以做到吗？

Answer 1

找到了实现它的方法！

我正在使用

renderTags

方法，根据我的条件创建禁用 true/false 的标签，如下所示，以实现此目的，并且它运行良好。

renderTags={(value: IDropdown[], getTagProps) =>
    value.map((option: any, index: number) => (
        declarationNilSections.findIndex(x => x.value === option.value) !== -1 ?
            (<Chip
                variant="filled"
                size="small"
                color="primary"
                label={option.label}
                disabled={true}
            />) :
            (<Chip
                variant="filled"
                size="small"
                color="primary"
                label={option.label}
                {...getTagProps({ index })}
            />)

    ))
}

对于我的特殊要求，我不想让用户以任何方式删除这些预选选项，我必须禁用另外两种可能导致选项被删除的方法。

1. 按下控制器上的退格按钮
2. 通过自动完成清除所有选项按钮

为了实现第一点，我从自动完成输入中禁用了退格按钮删除，所以我的

renderInput

功能现在看起来像这样

renderInput={(params) => (
    <TextField
        {...params}
        placeholder="Sections"
        label='Nil Sections'
        onKeyDown={(event: any) => {
            if (event.key === 'Backspace') {
                event.stopPropagation();
            }
        }
        }
    />

最后为了禁用自动完成中的清除所有选项按钮，我将其添加到自动完成属性中

disableClearable={true}

还有宾果游戏！ 我现在一切都按照我的要求工作了。