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

Question

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

所以我有一个场景，用户粘贴空格分隔的文本。是否可以为每个以空格分隔的值创建一个标签，即一个用于 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));
                                    }
                                }
                            }}
                        />
                    )}