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

Question

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

所以我遇到了用户粘贴 space 分隔文本的情况。是否有可能为每个 space 分隔值创建一个标签，即一个标签用于 3N1CE2CPXEL289419，另一个标签用于 3N1BC1AP8AL399166，点击输入按钮时？

Answer 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));
                                    }
                                }
                            }}
                        />
                    )}