MUI 自动完成 API：当我粘贴以空格分隔的文本时，在输入事件时会为其创建一个标签。可以在“输入”事件上创建多个标签吗？

Posted 2023-02-21

【中文标题】MUI 自动完成 API：当我粘贴以空格分隔的文本时，在输入事件时会为其创建一个标签。可以在“输入”事件上创建多个标签吗？

【英文标题】：MUI Autocomplete API: when I paste space-delimited text,on enter event a single tag is created for it. Can multiple tags be created on "enter" event?

【发布时间】：2021-11-15 23:29:29

【问题描述】：

我在我的 reactjs 应用程序中使用 MUI 自动完成控件。现在，如果我粘贴自定义（在选项列表中不可用）以空格分隔的内容，例如3N1CE2CPXEL289419 3N1BC1AP8AL399166，在点击回车按钮时，会为其创建一个标签：Autocomplete API image

所以我有一个场景，用户粘贴空格分隔的文本。是否可以为每个以空格分隔的值创建一个标签，即一个用于 3N1CE2CPXEL289419 的标签和一个用于 3N1BC1AP8AL399166 的标签？

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

【参考方案1】：

下面是我们如何实现abv -

                   <Autocomplete
                    multiple
                    limitTags=2
                    id="tags-filled"
                    onChange=onChange
                    size="small"                   
                    onInputChange=onInputChange
                    options=rowData.map((option) => option.vinno)
                    value=autoCompleteValue
                    freeSolo
                    loading
                    //defaultValue=[top100Films[13].title]                    
                    //onSelect=(event) => onSelect(event, 'tags')
                    /* either render tags will work or renderoption */
                    renderTags=(value, getTagProps) =>
                        value.map((option, index) => (
                            <Chip variant="outlined" onDelete=onDelete label=option ...getTagProps( index ) />
                            // <Chip variant="outlined" onDelete=onDelete label=option ...getTagProps( index ) onDelete=onDelete />
                        ))
                    
                    renderInput=(params) => (
                        <TextField
                            ...params                            
                            variant="outlined"
                            label="VinNOs"
                            placeholder="Favorites"
                            onKeyDown=e => 
                                if (e.key === "Enter" && e.target.value) 
                                    let text = e.target.value;
                                    if (text.includes(" ")) 
                                        let vinnos = text.split(" ");
                                        setAutoCompleteValue(autoCompleteValue.concat(vinnos));

                                     else 
                                        setAutoCompleteValue(autoCompleteValue.concat(e.target.value));
                                    
                                
                            
                        />
                    )