Material ui 具有多个值的文本字段（包含图像以供参考）

我正在寻找一个包含多个输入的文本字段，如下所示：

如你们所见，我可以在这里添加新的文本，然后按enter键保存那个关键词

有人能告诉我要找哪个包裹吗。。。。我在material ui autocomplete的costomized钩子中发现了类似的东西：

但我不希望它是下拉的，我希望它只是一个文本字段，带有如图所示的选项

我找不到这样的功能，或者我可能正在寻找工作，因为我不知道它的正确术语

任何指导都会大有裨益

---

我已经包括了material ui，reactstrap，因为这是我曾经使用过的东西，所以如果有任何其他软件包也请告诉我

几天前我也在构建类似的东西。这就是我到现在为止建造的

import {
  Chip,
    FormControl,
    Input,
    makeStyles,
} from "@material-ui/core";
import React, { useEffect, useState } from "react";
import "./styles.css";


export default function App() {
    const classes = useStyles();
    const [values, setValues] = useState(["test"]);
    const [currValue, setCurrValue] = useState("");

    const handleKeyUp = (e) => {
        console.log(e.keyCode);
        if (e.keyCode == 32) {
            setValues((oldState) => [...oldState, e.target.value]);
            setCurrValue("");
        }
    };

    useEffect(() => {
        console.log(values);
    }, [values]);

    const handleChange = (e) => {
        setCurrValue(e.target.value);
  };
  
  const handleDelete = ( item, index) =>{
    let arr = [...values]
    arr.splice(index,1)
    console.log(item)
    setValues(arr)
  }

    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
            <FormControl classes={{ root: classes.formControlRoot }}>
                <div className={"container"}>
                    {values.map((item,index) => (
                        <Chip  size="small" onDelete={()=>handleDelete(item,index)} label={item}/>
                    ))}
                </div>
                <Input
                    value={currValue}
                    onChange={handleChange}
                    onKeyDown={handleKeyUp}
                />
            </FormControl>
        </div>
    );
}

const useStyles = makeStyles((theme) => ({
    formControlRoot: {
        display: "flex",
        alignItems: "center",
        gap: "8px",
        width: "300px",
        flexWrap: "wrap",
        flexDirection: "row",
        border:'2px solid lightgray',
        padding:4,
        borderRadius:'4px',
        "&> div.container": {
            gap: "6px",
            display: "flex",
            flexDirection: "row",
            flexWrap: "wrap"
        },
        "& > div.container > span": {
            backgroundColor: "gray",
            padding: "1px 3px",
            borderRadius: "4px"
        }
    }
}));

导入{
炸薯条
FormControl，
输入，
制作风格，
}来自“@材料界面/核心”；
从“React”导入React，{useffect，useState}；
导入“/styles.css”；
导出默认函数App（）{
const classes=useStyles（）；
const[values，setValues]=useState（[“test”]）；
const[currValue，setCurrValue]=useState（“”）；
常量handleKeyUp=（e）=>{
console.log（例如keyCode）；
如果（e.keyCode==32）{
setValues（（oldState）=>[…oldState，e.target.value]）；
设置当前值（“”）；
}
};
useffect（（）=>{
console.log（值）；
}，[价值]；
常数handleChange=（e）=>{
设置电流值（如目标值）；
};
常量handleDelete=（项目、索引）=>{
设arr=[…值]
阵列拼接（索引，1）
console.log（项目）
设定值（arr）
}
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{values.map（（项，索引）=>(
handleDelete（项目，索引）}label={item}/>
))}
);
}
const useStyles=makeStyles（（主题）=>({
formControlRoot：{
显示：“flex”，
对齐项目：“中心”，
差距：“8px”，
宽度：“300px”，
柔性包装：“包装”，
flexDirection:“行”，
边框：'2px实心浅灰色'，
填充：4，
边界半径：'4px'，
“&>div.container”：{
间隙：“6px”，
显示：“flex”，
flexDirection:“行”，
柔性包装：“包装”
},
“&>div.container>span”：{
背景颜色：“灰色”，
填充：“1px 3px”，
边界半径：“4px”
}
}
}));

以下是工作演示：