javascript - Hvordan bruger man Material-UI Autocomplete-komponenten til at vælge flere muligheder og tilføje nye muligheder?

mål

Jeg har et multiple felt, der:

  1. vi kan vælge brugere, der er til stede i autofuldførelsen (en liste, som jeg henter via API)
  2. Vi kan indtaste navnene på nye brugere, som vi adskiller med et komma

For det har jeg derfor brug for at hente værdien af value og inputValue. For value er der ikke noget problem, men for inputValue er der noget, som jeg ikke forstår

problem

Når jeg ændrer værdien af inputValue i onInputChange, bliver dens tilstand ændret og nulstillet på den måde

information

Jeg baserer mig på det eksempel, som Material UI tilbyder

Kode i sandkasse

Kode

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

interface User {
  id: number;
  name: string;
}

const userList: User[] = [
  { id: 1, name: "name 1" },
  { id: 2, name: "name 2" },
  { id: 3, name: "name 3" }
];

export default function AutocompleteControlled() {

  const [users, setUsers] = React.useState<number[]>([]);
  const [inputValue, setInputValue] = React.useState("");

  return (
    <div>
      <br />
      <Autocomplete
        multiple
        value={userList.filter((el) => users.includes(el.id))}
        onChange={(event: any, newValue: User[]) => {
          setUsers(newValue.map((el) => el.id));
        }}
        inputValue={inputValue}
        onInputChange={(event: any, newInputValue: string) => {
          console.log("newInputValue", newInputValue);
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={userList}
        getOptionLabel={(option) => option.name}
        renderInput={(params) => (
          <TextField {...params} label="Controllable" variant="outlined" />
        )}
      />
    </div>
  );
}

Alle kommentarer er velkomne :)

Svar #1

Du vil aktivere multivalg og tillade brugeren at indtaste en vilkårlig værdi i tekstboksen. Derfor kan du bruge Autocomplete-komponenten med freesolo-egenskaben sat til true, så tekstboksen kan indeholde enhver vilkårlig værdi.

Dette er Material-UI-eksemplet, der ligger tættest på dit brugstilfælde.

Vi vil bruge en kontrolleret komponent, så du kan styre dens adfærd med value og onChange egenskaberne. Se koden nedenfor.

Du kan vælge fra de forudfyldte elementer, eller du kan indtaste en vilkårlig værdi og trykke på enter, og en chip vil blive tilføjet til komponenten, og værdien vil blive tilføjet til arrayet i staten.

I øjeblikket er value et array af navnene, men du kan sætte det til id'erne eller hvad du vil.

Prøv denne kode:

import React from "react";
import Chip from "@material-ui/core/Chip";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: 500,
      "& > * + *": {
        marginTop: theme.spacing(3),
      },
    },
  })
);

interface User {
  id: number;
  name: string;
}

const userList: User[] = [
  { id: 1, name: "name 1" },
  { id: 2, name: "name 2" },
  { id: 3, name: "name 3" },
  { id: 4, name: "name 4" },
  { id: 5, name: "name 5" },
];

export default function AutocompleteControlled() {
  const classes = useStyles();

  const [value, setValue] = React.useState<any>([userList[0].name]);

  console.log("value: ", value);

  return (
    <div className={classes.root}>
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        multiple
        id="tags-filled"
        options={userList.map((option) => option.name)}
        freeSolo
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip
              variant="outlined"
              label={option}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="filled"
            label="Users"
            placeholder="Search"
          />
        )}
      />
    </div>
  );
}

Sådan ser det ud, den kontrollerede værdi bliver logget til konsollen.

Relaterede artikler