React js материал для автозаполнения чипов с кнопкой внутри - PullRequest
Новая
       8

React js материал для автозаполнения чипов с кнопкой внутри

1 голос
/ 06 марта 2020

enter image description here Как видно из изображения, первое поле ввода представляет собой работающее автозаполнение, в котором используются микросхемы.

Второе поле ввода всегда является автозаполнением, но не работает, внутри которой кнопка была вставлена ​​внутри TextField.

Я хотел бы собрать их вместе, то есть иметь автозаполнение, как в первом случае, но иметь кнопку внутри, чтобы дать пользователю опыт современного пользователя.

Можете ли вы помочь мне?

Ссылка: codesandbox

Код: 

/* eslint-disable no-use-before-define */
import React from "react";
import { Button, InputAdornment } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

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

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

  return (
    <div className={classes.root}>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={top100Films}
        getOptionLabel={option => option.title}
        defaultValue={[top100Films[13]]}
        filterSelectedOptions
        renderInput={params => (
          <TextField
            {...params}
            variant="outlined"
            label="filterSelectedOptions"
            placeholder="Favorites"
          />
        )}
      />
      <Autocomplete
        multiple
        id="tags-outlined"
        options={top100Films}
        getOptionLabel={option => option.title}
        defaultValue={[top100Films[13]]}
        filterSelectedOptions
        renderInput={params => (
          <TextField
            {...params}
            variant="outlined"
            label="filterSelectedOptions"
            placeholder="Favorites"
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <Button variant="contained" color="primary" size="small">
                    Subscribe
                  </Button>
                </InputAdornment>
              )
            }}
          />
        )}
      />
    </div>
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: "Pulp Fiction", year: 1994 },
  { title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { title: "The Good, the Bad and the Ugly", year: 1966 }
];
...