reactjs - Material UI Chip数组如何像Angular Chip Input一样使用？

Question

是否可以模拟 Angular Material Chip input使用 React Material UI 输入样式 Chip array ？

我正在尝试在 React 中启用 Angular Material Chip 输入的简洁外观。 Material UI Chip 数组似乎是最接近的东西，但它似乎不支持原生输入。是否有可用于获得相同功能的配置？

Answer 1

基于@ryan-cogswell 的评论，使用 Autocomplete使用 freeSolo 设置产生的结果类似于 Angular Material 的 Chip 输入。

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

import "./App.css";

export const App: React.FC = () => {
  return (
    <div className="App">
      <Autocomplete
        multiple
        id="tags-filled"
        options={[]}
        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="freeSolo"
            placeholder="Favorites"
          />
        )}
      />
    </div>
  );
};