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

Question

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

正如您所看到的，我可以添加新文本，然后按 Enter 键会保存该关键字。

有人可以指导寻找哪个包......我在material ui autocomplete的自定义挂钩中发现了类似的东西： https: //material-ui.com/components/autocomplete/，

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

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

任何指导都会有很大帮助。

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

Answer 1

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

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"
        }
    }
}));

这是工作演示：