Material-ui Autocomplete:Přidejte hodnotu do začátkuOzdoba

Mám automatické doplňování s oprávněním vícenásobného výběru.

https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js

V příkladu mám 3 možnosti pro města. Jak mohu ručně přidat automatickou přidanou hodnotu do TextField, když je něco vybráno?

Jinými slovy zde:

 renderInput={(params) => {
        console.log(params);
        return (
          <TextField
            {...params}
            variant="outlined"
            label="Cities"
            placeholder="Enter cities"
            autoComplete="off"
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <React.Fragment>
                  {params.InputProps.endAdornment}
                </React.Fragment>
              )
            }}
          />
        );
  }}

Chci mít možnost přidávat do params.InputProps.startAdornment hodnotu před vykreslením textového pole.

protože každý vybraný objekt se zdá být velmi složitým objektem, jak to mohu udělat ručně (je příliš komplikované tlačit ())? Nějaké nápady, jak mohu přidat objekt, jako je tento:

ručně?

Odpověď

hodnotu startAdornment je nedefinováno, dokud není vybrána hodnota z rozevíracího seznamu/zaškrtávacího políčka. Můžete tedy přidat startAdornment vlastnost k InputProps, jak je uvedeno níže,

import { Chip } from '@material-ui/core';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  chip: {
    margin: theme.spacing(0.5, 0.25)
  }
}));

const classes = useStyles();

const handleDelete = (item) => () => {...};

 renderInput={(params) => {
    console.log(params);
    return (
      <TextField
        {...params}
        variant="outlined"
        label="Cities"
        placeholder="Enter cities"
        autoComplete="off"
        InputProps={{
          ...params.InputProps,
          startAdornment: (
            <Chip
              key={"manual"}
              tabIndex={-1}
              label={"manually added"}
              className={classes.chip}
              onDelete={handleDelete("blah")}
              deleteIcon // requires onDelete function to work
            />
          ),
          endAdornment: (
            <React.Fragment>
              {params.InputProps.endAdornment}
            </React.Fragment>
          )
        }}
      />
    );
  }}