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

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

这是工作演示：

Answer 2

使用

react-hook-form

和

Autocomplete

执行此操作的一种可能方法是使用

Chip

和

renderTags

函数，这里是一个示例：

import {
  Box,
  TextField,
  Autocomplete,
  Chip,
} from '@mui/material'
...
const {
    handleSubmit,
    control,
    formState: { errors },
} = useForm()

...
<Box mt={2}>
    <Controller
    control={control}
    name="tags"
    rules={{
        required: "Veuillez choisir une réponse",
    }}
    render={({ field: { onChange } }) => (
        <Autocomplete
        defaultValue={
            useCasesData?.tags ? JSON.parse(useCasesData?.tags) : []
        }
        multiple
        id="tags-filled"
        options={[]}
        freeSolo
        renderTags={(value, getTagProps) =>
            value.map((option, index) => (
            <Chip
                variant="outlined"
                label={option}
                {...getTagProps({ index })}
            />
            ))
        }
        onChange={(event, values) => {
            onChange(values);
        }}
        renderInput={(params) => (
            <TextField
            {...params}
            label="Métadonnées"
            placeholder="Ecriver les métadonnées"
            helperText={errors.tags?.message}
            error={!!errors.tags}
            />
        )}
        />
    )}
    />
</Box>